Tạo phần tử div tùy chỉnh với hình dạng đặc biệt động

Question

Tôi muốn tạo ra một số hình dạng như thế này:

Đây là 3 shapes.Then tôi muốn đặt một số yếu tố về hình này. Tôi cố gắng sử dụng thuộc tính bán kính đường viền nhưng không thể tạo hình dạng này. Ngoài ra tôi cố gắng sử dụng <img>, <map> và <area> nhưng tôi có vấn đề với các yếu tố đặt trên đó. Ý tưởng của bạn về nó là gì?

Answer 1

Bạn chỉ cần phải là người ngồi sáng tạo:

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/

Hoặc bạn có thể làm một cái gì đó như thế này, uốn cong hai bên và sử dụng Tính năng xoay CSS3 để có được ba hình dạng:

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

Bạn có thể sẽ phải sử dụng HTML5 canvas để đạt được hình dạng phức tạp chính xác mà bạn đang yêu cầu:

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