Javascript 动态创建具有特殊形状的自定义div元素

我想创建如下形状：

这是3个形状。然后我想在这个形状上添加一些元素。 我尝试使用边界半径属性，但它无法生成此形状。 我还尝试使用

、

和

但是我在放置元素时遇到了问题。

---

你的想法是什么？

你只要有创意：

HTML:

或者，您可以这样做，弯曲侧面并使用CSS3旋转功能来获得三种形状：

您可能需要使用HTML5画布来实现所需的精确复杂形状：

---

使用

标记，可以在块元素内部进行绘制，我认为这是实现您期望的最简单的方法。@您的意思是使用HTML5吗？您可以制作一个示例吗？浏览器与该元素的兼容性如何？查看此页面：大量示例：谢谢您的回复，但我需要3个元素，我需要动态生成这个元素。想象一下，将坐标保存在数据库和页面加载中，并将其打印在页面上。那么，最好使用图像。为什么它需要是代码？我想把元素放在这些元素上，这些元素是容器元素，我还需要容器元素的边界。如果我使用DIV标记并为其设置背景图像，我就没有绑定自定义形状。现在我不知道应该使用哪个元素。好的，试试我添加的另一个JSFIDLE谢谢，边界呢？想象一下，如果我在div中写一些文本，文本只能在彩色区域中。

<div id="circle">
    <div id="cover"></div>        
    <div id="innerCircle">     
        <div id="rect1"></div>
        <div id="rect2"></div>
    </div>
</div>

   #circle { 
       width: 140px;
       height: 140px;
       background: red; 
       -moz-border-radius: 70px; 
       -webkit-border-radius: 70px; 
       border-radius: 70px;
        margin: 0 auto;
        position: relative;
        top: -50px;
    }

    #innerCircle { 
       width: 90px;
       height: 90px;
       background: white; 
       -moz-border-radius: 70px; 
       -webkit-border-radius: 70px; 
       border-radius: 70px;
        position: absolute;
        top: 25px;
        right: 25px;
    }

    #rect1 {
        width: 20px; 
       height: 90px; 
       background: white;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
        position: absolute;
        top: 50%;
        left: 5px;
    }

    #rect2 {
       width: 20px; 
       height: 90px; 
       background: white;
    transform: rotate(-30deg);
    -ms-transform: rotate(-30deg); /* IE 9 */
    -webkit-transform: rotate(-30deg); /* Safari and Chrome */
        position: absolute;
        top: 50%;
        right: 5px;
    }

    #cover {
       width: 150px; 
       height: 80px; 
       background: white;
        position: absolute;
        top: 0px;
        left: 0px;
    }