css - CSS3 中的曲线 block

Question

我想知道是否有办法让 block 具有 [这种形状][1](任何 CSS 解决方案，也包括 3D)。我试过 border-radius 但你不能有负值。

谢谢。

编辑:

对于缺少信息，我深表歉意，但我位于一个街区，而不是边界(图像不好，我的错)。实际上它是用来做丝带的，我希望它有点 flex ，比如this one , 因为我必须在里面写文字，所以它不能是边框。

如果它在 CSS 而不是 Canvas/SVG 中可行，那就太好了。

再次感谢。

编辑:完毕!更多详情:http://forrst.com/posts/CSS3_Curved_Ribbon-IyB

Answer 1

http://jsfiddle.net/efortis/E6SRf/1

<div class="clipper">
  <div class="shape"> </div> 
</div>

.shape{
 border-radius: 600px;
 width: 600px;
 height: 600px;
 border: 4px solid black;
}

.clipper {
 width: 610px;
 height: 150px;
 overflow:hidden;
}