創建特殊形狀定製的div元素動態

Question

我想創造一些形狀像這樣：

這些都是3 shapes.Then我希望把一些元素在這個形狀。 我嘗試使用border-radius屬性，但它無法生成此形狀。 另外我嘗試使用<img>,<map>和<area>但我有問題與放元素。 你對此有何想法？

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/