Create this shape in css - css

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.

Answer 2

Your example appears to resemble a chevron shape, forgive me if that's not the case, but if it is you are in luck because you can make a chevron shape using pure 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>
You can find the original example and some other shapes here