Create this shape in css

问题

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.

回答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.

回答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

来源：https://stackoverflow.com/questions/8673538/create-this-shape-in-css