javascript - 特殊な形状のカスタム div 要素を動的に作成する

Question

私はこのようないくつかの形状を作成したい:

これらは 3 つの形状です。次に、この形状に要素を配置します。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/