在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 Fiddle demo

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>

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