CSS绘制常见形状的图形

圆形

.shixinyuan{
width: 100px;
height: 100px;
background: red;
border-radius: 50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-o-border-radius:50px;
/* border-radius: 50%; 可以使用百分比值（大于或等于50%），但是低版本的Android不支持*/
}

圆环（同心圆）

.konxinyuan{
width: 100px;
height: 100px;
background: red;
position: relative;
border-radius: 50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-o-border-radius:50px;
}
.konxinyuan-inner{
width: 80px;
height: 80px;
background: #fff;
position: absolute;
left: 50%;top: 50%;
margin-left: -40px;
margin-top: -40px;
border-radius: 50%;
z-index: 999;
}

上半圆形

.top-half-circle{
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
-moz-border-radius: 50px 50px 0 0;
-webkit-border-radius: 50px 50px 0 0;
}

左半圆

.left-half-circle{
width: 50px;
height: 100px;
background: red;
border-radius: 50px 0 0 50px;
}

四分之一半圆

.quater-circla{
width: 50px;
height: 50px;
background: red;
border-radius: 0 50px 0 0;
-webkit-border-radius: 0 50px 0 0;
-moz-border-radius: 0 50px 0 0;
}

椭圆

.oval{
width: 200px;
height: 100px;
background: red;
border-radius: 100px/50px; /* 水平/垂直*/
}

胶囊椭圆

.capsule{
width: 200px;
height: 100px;
background: red;
border-radius: 50px;
}

半个胶囊

.half-capsule{
width: 100px;
height: 140px;
background: red;
border-radius: 50px 50px 0 0
}

鸡蛋

.jidan{
width: 126px;
height: 180px;
background: red;
border-radius: 63px 63px 63px 63px/108px 108px 72px 72px;
/* border-radius:50% 50% 50% 50% 50%/60% 60% 40% 40%; */
}

opera浏览器图标

.opera{
width: 258px;
height: 275px;
background: red;
border-radius: 258px/275px;
position: relative;
}
.opera-inner{
width: 122px;
height: 230px;
background: #fff;
border-radius: 122px/230px;
position: absolute;
left: 50%;
margin-left: -61px;
top: 50%;
margin-top: -115px;
}

吃豆人

.chidouren{
width: 0px;
height: 0px;
border-left: 50px solid red;
border-top: 50px solid red;
border-bottom: 50px solid red;
border-right: 50px solid transparent; /* border-right 的边框颜色不能用#fff，不然会有红色边框*/
border-radius: 50px;
}

向上的三角形

.triangle-up{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
float: left
}
.triangle-up-sm{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid red;
/*border-bottom的数值代表三角形的高度，而border-left和border-right数值的和是三角形的宽度*/
float: left;
margin-left: 100px;
}

向右的三角形

width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 100px solid red;
}
.triangle-right-sm{
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-left: 50px solid red;
margin-left: 100px;
}

左上三角形

.triangle-top-left{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
/* border-left: 100px solid red;
border-bottom: 100px solid transparent; */
}
.triangle-top-left-lg{
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 50px solid transparent;
margin-left: 100px;
}
.triangle-top-left-sm{
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 100px solid transparent;
margin-left: 100px;
}

左下三角形

.triangle-left-bottom{
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 100px solid transparent;
}
.triangle-left-bottom-lg{
width: 0;
height: 0;
border-left: 50px solid red;
border-top: 100px solid transparent;
margin-left: 100px;
}
.triangle-left-bottom-sm{
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 50px solid transparent;
margin-left: 100px;
}

右上角三角形

.triangle-top-right{
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}

梯形

.tixing-bottom{
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
height: 0;
}
.tixing-top{
margin-left: 50px;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
width: 100px;
}

平行四边形

.pingxingsibianxing{
width: 150px;
height: 100px;
background: red;
transform: skew(20deg);
-webkit-transform: skew(20deg);
}

六角星

.liujiaoxing{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: relative;
}
.liujiaoxing:before{
content: "";
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: absolute;
top: 30px;
left: -50px;
}

五边形

.wubianxing{
width: 54px;
height: 0;
border-top: 50px solid red;
border-right: 18px solid transparent;
border-left: 18px solid transparent;
position: relative;
margin-top: 100px;
}
.wubianxing:after{
content: "";
width: 0;
height: 0;
border-bottom: 40px solid red;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
position: absolute;
left:-18px;
top: -90px;
}

菱形

.lingxing{
width: 100px;
height: 100px;
background: red;
transform: rotate(45deg);
}

圆锥形

.yuanzhuixing{
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-radius: 50%;
}

心形

.xinxing{
width: 100px;
height: 100px;
background: red;
position: relative;
margin-left: 100px;
transform: rotate(45deg);
}
.xinxing:before{
content: "";
width: 50px;
height: 100px;
background: red;
border-radius: 50px 0 0 50px;
position: absolute;
left: -50px;
}
.xinxing:after{
content: "";
width: 100px;
height: 50px;
background: red;
border-radius: 50px 50px 0 0;
position: absolute;
bottom: 100%;
left: 0;
}

钻石形

.zhuangshi{
width: 0;
height: 0;
border-top: 80px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
position: relative;
margin-top: 80px;
margin-left: 150px;
}
.zhuangshi::before{
content: "";
border-bottom: 30px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
width: 60px;
position: absolute;
top: -110px;
left: -50px;
}

气泡对话框

.qipaokuan{
width: 250px;
height: 120px;
background: red;
border-radius: 100%;
position: relative;
margin-left: 150px;
}
.qipaokuan:before{
content: "";
width: 40px;
height: 40px;
background: red;
border-radius: 100%;
position: absolute;
left: 0;
bottom: -30px;
}
.qipaokuan:after{
content: "";
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
position: absolute;
left: -20px;
bottom: -45px;
}

对话框

.duihuakuang-one{
width: 220px;
height: 100px;
background: #fff;
border:2px solid #ddd;
position: relative;
}
.duihuakuang-one:before{
content: "";
width: 0;
height: 0;
border-top: 30px solid #ddd;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
left: 60px;
top: 100px;
}
.duihuakuang-one:after{
content: "";
width: 0;
height: 0;
border-top: 30px solid #fff;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
position: absolute;
left: 60px;
top: 98px;
z-index: 999;
}