在css中创建此形状 [英] Create this shape in css

问题描述

请查看此图片：

我为我的无用绘画能力道歉： - ）

I apologise for my useless paint ability :-)

在css中的形状，像），不使用div中的文本，只是纯 css。

How can I draw that sort of shape in css, like a ) without the use of text in a div, just pure css.

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

I have tried to make it curved like in the example, but I don't know how to curve it like that from the center.

我必须在css中做这种形状吗？

What must I do to make this kind of shape in css?

谢谢。

推荐答案

这里有一种实现方法，但注意，这个元素中的任何文本都不会维持曲线的错觉。所以我不确定这对你有多么有用，但因为你没有指定你的用例，它似乎值得发布，或许，它可能在某种程度上使用。如果只是作为一个想法如何继续：

Here's one approach to implementing this, but note that any text in this element isn't going to maintain the illusion of a curve. So I'm unsure as to how useful this would be to you, but as you don't specify your use-case, it seemed worth posting as, perhaps, it might be of use in some way. If only as an idea for how you might proceed:

#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 。

这篇关于在css中创建此形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！