CSS3特殊图形制作
现在IE8+的浏览器都支持CSS3+HTML5了，IE8及以下的浏览器的浏览器也快告一段落了，大前端的时代来了。废话不多说，现在开始用CSS3画图
1、心型
//HTML <div class="box"></div>
//css3 <style>
.box{
position: relative;
width: 160px;
height: 160px;
border: 1px solid red;
}
.box:before{
position: absolute;
left: 20px;
width: 80px;
height: 120px;
content: '';
background: #f00;
border-radius: 100px 100px 0 0;
transform: rotate(-45deg);
}
.box:after{
position: absolute;
left: 48px;
top: 0px;
width: 80px;
height: 120px;
content: '';
background: #f00;
border-radius: 100px 100px 0 0;
transform: rotate(45deg);
}
</style>
2、太极符
//HTML <div class="box"></div> //CSS3
<style>
.box{
position: relative;
width: 96px;
height: 48px;
border-color: #000;
border-style: solid;
border-width: 2px 2px 50px 2px;
background: #fff;
border-radius: 100%;
}
.box:before{
position: absolute;
top: 50%;
left: 0;
width: 12px;
height: 12px;
border: 18px solid #000;
background: #fff;
content: '';
border-radius: 100%;
}
.box:after{
position: absolute;
top: 50%;
left: 50%;
width: 12px;
height: 12px;
border: 18px solid #fff;
background: #000;
content: '';
border-radius: 100%;
}
</style>
3、扇形
//html <div class="box"></div>
//css3
<style>
.box{
width: 0;
height: 0;
border: 60px solid yellow;
border-color: yellow transparent yellow yellow;
border-radius: 60px;
}
</style>