CSSでのシェイプの作成

添付の画像をCSSで作成をしたいのですが、探しても上手くコーディングする方法が見つかりませんでした。
border-radiusを使用して、少し斜めにするの方法をご存知の方、ご教授いただければ幸いです。

m.ts10806

2021/03/02 09:45

調べたこと試したことを記載してください。「探しても見つからなかった」が他者に伝える情報は皆無です。

Daregada

2021/03/02 10:56

右側は画像の通りの直角なのか、左側と同様の斜めになった角丸なのか、明記してください。

行動規範の内容に同意します

回答2件

ベストアンサー

疑似要素をskewXで傾けてみました。
本体をskewXすると中身も傾いてしまうので。

html
1<div class="skewBox">
2  <h1>ABCDEF</h1>
3</div>

css
1.skewBox {
2  max-width: 960px;
3  height: 200px;
4  margin: 20px auto 0;
5  padding: 20px 180px;
6  position: relative;
7  color: white;
8  overflow: hidden;
9}
10.skewBox::before {
11  content: "";
12  position: absolute;
13  top: 0;
14  bottom: 0;
15  left: 100px;
16  right: -100px;
17  background: #000;
18  transform: skewX(-20deg);
19  border-radius: 20px 0 0 30px;
20  z-index: -1;
21}

投稿2021/03/02 13:11

hatena19

総合スコア34377

mai1210

2021/03/02 23:27

たしかにこっちの方が中身入れる時に楽ですね。勉強になります。

ochomo

2021/03/03 09:18

ありがとうございます！こちらで使用させて頂きます。大変助かりました。ありがとうございました！！

行動規範の内容に同意します

transform: skewX()で角丸の平行四辺形をつくって、右端を埋めるようにしてみましたがどうでしょう。

サンプル

HTML
1<div class="trapezoid"></div>

css
1.trapezoid {
2  width: 960px;
3  height: 200px;
4  margin: 30px auto 0;
5  background: #000;
6  position: relative;
7  transform: skewX(-30deg);
8  border-radius: 20px 0 0 30px;
9}
10.trapezoid:after {
11  transform: skewX(30deg);
12  content: "";
13  position: absolute;
14  top: 0;
15  right: -100px;
16  width: 0;
17  height: 0;
18  border: 100px solid #000;
19}