は動的

Question

私はこのようないくつかの図形を作成したい特殊な形状を持つカスタムdiv要素を作成します。

これらは、私は、この形状にいくつかの要素を入れたい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は3つの図形を得るために機能を回転させる：

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

あなたはおそらく、あなたが要求している正確な複雑な形状を達成するためにHTML5のキャンバスを使用する必要があります：

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