dinamik

Question

böyle bazı şekiller oluşturmak istediğiniz özel şekli ile özel div öğesi oluşturun:

Bunlar ben bu şekli üzerinde bazı eleman koymak istiyorum 3 shapes.Then vardır. Sınır yarıçapı özelliğini kullanmaya çalışıyorum ancak bu şekli oluşturamıyor. Ayrıca <img>, <map> ve <area> kullanmayı deneyin, ancak üzerine koyma öğeleri ile ilgili bir sorunum var. Bunun hakkında ne düşünüyorsunuz?

Answer 1

etmelisin yaratıcı olmak:

HTML:

<div id="circle"> 
    <div id="cover"></div>   
    <div id="innerCircle">  
     <div id="rect1"></div> 
     <div id="rect2"></div> 
    </div> 
</div> 

CSS: Böyle

#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/

Yoksa yapabileceği bir şey, tarafları eğri ve kullanma CSS3 üç şekli elde etmek için özellikleri döndürür:

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

Muhtemelen, tam olarak istediğiniz karmaşık şekiller elde etmek için HTML5 tuval kullanmak zorunda olacak:

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