下面所有的例子都是在demo.html的基础上添加相关样式实现的。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> .demo{ margin:100px auto; } </style> </head> <body> <div class="demo"> </div> </body> </html>
正方形
.demo{100px;height:100px;background:red;}
长方形
.demo{100px;height:150px;background:red;}
圆形
.demo{100px;height:100px;background:red;border-radius:50%;}
半圆
.demo{100px;height:50px;background:red;border-radius:100px 100px 0 0 ;}
扇形
.demo{background:none repeat scroll 0 0 red;border-radius:50px 0 0 0;height:50px;50px;}
椭圆
.demo{200px;height:100px;border-radius:100px / 50px;background:red;}
三角朝上
.demo{0;height:0;border:50px solid red;border-color:transparent transparent red;}
三角朝下
.demo{0;height:0;border:50px solid red;border-color:red transparent transparent;}
三角朝左
.demo{0;height:0;border:50px solid red;border-color: transparent red transparent transparent;}
三角朝右
.demo{0;height:0;border:50px solid red;border-color: transparent transparent transparent red;}
左上三角形
.demo{0px;height:0px;border:100px solid red;border-color:red transparent transparent red;}
平行四边形
.demo{150px;height:100px;transform:skew(20deg);background:red;}
梯形
.demo{height:0;100px;border-bottom:100px solid #e5c3b2;border-left:60px solid transparent;border-right:60px solid transparent;}
梯形
.demo{height:100px;0;border-right:100px solid #e5c3b2;border-top:60px solid transparent;border-bottom:60px solid transparent;}
图表
.demo{height:0px;0px;border:50px solid red;border-radius:50px;border-color:purple red yellow orange;}
六角星
.demo{
0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid red;
position:relative;
}
.demo:after{
0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid red;
position:absolute;
content:"";
top:30px;
left:-50px;
}
五角星
.demo{
margin: 50px 0;
position: relative;
display: block;
color: red;
0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
transform: rotate(35deg);
}
.demo:before{
border-bottom: 80px solid red;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
height: 0;
0;
top: -45px;
left: -65px;
display: block;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
transform: rotate(-35deg);
}
.demo:after{
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
transform: rotate(-70deg);
content: '';
}
彩带
.demo{
0;
height:100px;
border-left:50px solid red;
border-right:50px solid red;
border-bottom:35px solid transparent;
}
心形
.demo{
position: relative;
100px;
height: 90px;
}
.demo:before,.demo:after{
position: absolute;
content: "";
left: 50px;
top: 0;
50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg); -
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.demo:after{
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
pac-man
.demo{
0px;
height: 0px;
border: 60px solid red;
border-color: red transparent red red ;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}
对话泡泡
.demo{
120px;
height:80px;
background:red;
position:relative;
border-radius:10px;
}
.demo:before{
content:'';
position:absolute;
right:100%;
top:26px;
0;
height:0;
border-top:13px solid transparent;
border-right:26px solid red;
border-bottom:13px solid transparent;
}
Point Burst
.demo{
background: red;
80px;
height: 80px;
position: relative;
text-align: center;
}
.demo:before,.demo:after{
content: "";
position: absolute;
top: 0; left: 0;
height: 80px;
80px;
background: red;
}
.demo:before{
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.demo:after{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
阴阳图
.demo{
96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border- 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
.demo:before{
content: "";
position:
absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 100%;
12px;
height: 12px;
}
.demo:after{
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
12px;
height: 12px;
}
