在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小提琴演示.