css - css でこの形状を作成します。

Question

この画像を見てください：

私の無用なペイント能力で申し訳ありません:-)

)divでテキストを使用せずに、純粋なCSSだけのように、CSSでそのような形状を描くにはどうすればよいですか。

作例のように湾曲させようとしたのですが、中心からそのように湾曲させる方法がわかりません。

cssでこのような形を作るにはどうすればいいですか?

ありがとう。

Answer 1

これを実装する 1 つの方法を次に示しますが、この要素内のテキストは曲線の錯覚を維持しないことに注意してください。したがって、これがあなたにとってどれほど役立つかはわかりませんが、ユースケースを指定していないため、おそらく何らかの形で役立つ可能性があるため、投稿する価値があるように思われました. どのように進めるかについてのアイデアとしてのみの場合：

#box {
    display: block;
    margin: 2em auto;
    width: 10em;
    height: 5em;
    background-color: black;
    position: relative;
}

#box:before {
    position: absolute;
    top: -1em;
    left: 0;
    right: 0;
    height: 2em;
    background-color: #fff;
    content: ' ';
    border-radius: 50%;
}

#box:after {
    position: absolute;
    bottom: -1em;
    left: 0;
    right: 0;
    height: 2em;
    background-color: #000;
    content: ' ';
    border-radius: 50%;
}

JS フィドルのデモ。

Answer 2

あなたの例はシェブロンの形に似ているように見えますが、そうでない場合は許してください。純粋なCSSを使用してシェブロンの形を作ることができるので、幸運です.

.chevron {
  position: relative;
  text-align: center;
  padding: 12px;
  margin-bottom: 6px;
  height: 60px;
  width: 200px;
}

.chevron:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 51%;
  background: black;
  transform: skew(0deg, 6deg);
}
.chevron:after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 50%;
  background: black;
  transform: skew(0deg, -6deg);
}

<div class="chevron"></div>

元の例と他の形状はここにあります