我想创建一些像这样的形状:
这些是3个形状。然后我想在这个形状上加上一些元素。
我尝试使用border-radius属性,但它无法生成此形状。
此外,我尝试使用<img>
,<map>
和<area>
,但我有put元素的问题。
你有什么想法?
答案 0 :(得分:8)
你必须要有创意:
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;
}
或者你可以做这样的事情,弯曲两边并使用CSS3旋转功能来获得三种形状:
您可能必须使用HTML5画布来实现您要求的确切复杂形状:
http://www.html5canvastutorials.com/tutorials/html5-canvas-custom-shapes/