css - 在 css 中创建这个形状

Question

请看一下这张图片：

我为我无用的绘画能力道歉:-)

我怎样才能在css中绘制那种形状，就像)在div中不使用文本一样，只是纯css。

我试图让它像示例中一样弯曲，但我不知道如何从中心弯曲它。

我必须怎么做才能在css中制作这种形状？

谢谢。

Answer 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>

您可以在此处找到原始示例和其他一些形状