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

Question

我想创建一些像这样的形状： 这是3个形状。然后我想在这个形状上放一些元素。我尝试使用border-radius属性，但它不能生成这个形状。我还尝试使用< img >，< map >和< area >，但我无法在其上放置元素。你对此有什么想法？

- Saman Gholami

---

使用<canvas>标签，可以在块级元素内绘制图形，我认为这是实现你所需的最简单的方法。 - Imperative

@Imperative 您是指使用HTML5吗？您能提供一个样例吗？这个元素在浏览器兼容性方面怎么样？ - Saman Gholami

请查看此页面：大量示例：http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/ - Imperative

Answer 1

你必须要有创意：

HTML：

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

CSS：

   #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;
    }

http://jsfiddle.net/bnSe7/

或者你可以像这样做，弯曲两侧并使用CSS3旋转功能来获得三个形状：

http://jsfiddle.net/RqWtC/1/

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

http://www.html5canvastutorials.com/tutorials/html5-canvas-custom-shapes/

- Michael Rader

---

谢谢您的回复，但我需要3个元素，并且我需要动态生成这些元素。想象一下将坐标保存在数据库中，在页面加载时将它们打印在页面上。 - Saman Gholami

我想将元素放置在这些容器元素上，这些元素是容器元素，同时我需要容器元素的边界。如果我使用 DIV 标签并为其设置背景图像，则无法获得自定义形状的边界。现在我不知道应该使用哪个元素。 - Saman Gholami

好的，请尝试我添加的另一个JSFiddle。 - Michael Rader

谢谢，那边界呢？想象一下，如果我在 div 中写一些文本，那么文本只能在有颜色的区域内。 - Saman Gholami

好的，请查看更新后的fiddle。这就是您所需要的吗？非常简单。 - Michael Rader