Tworzenie niestandardowego elementu div o specjalnym kształcie dynamicznie

Question

Chcę stworzyć pewne kształty jak to:

Są 3 shapes.Then chcę umieścić jakiś element w tym kształcie. Próbuję użyć właściwości border-radius, ale nie mogę wygenerować tego kształtu. Również próbuję użyć <img>, <map> i <area>, ale mam problem z umieszczaniem na nim elementów. Co masz na myśli?

Answer 1

Po prostu musisz być kreatywny:

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/

Albo można zrobić coś takiego, wijąca się na boki i za pomocą Funkcje CSS3 obracaj, aby uzyskać trzy kształty:

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

Prawdopodobnie będziesz musiał użyć HTML5 canvas osiągnąć dokładne skomplikowanych kształtów żądasz:

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