Question

Please take a look at this image:

I apologise for my useless paint ability 🙂

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.

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

Thanks.

Answer 1

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.