三角形
1.角度向上
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
2. 角向下
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
3. 角想左
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
4. 角向右
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
5.左直角
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
6.右直角
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
7.左下直角
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
8.右下直角
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
圆形
width: 100px;
height: 100px;
border-radius: 50%;
background: #f00;
半圆
width: 100px;
height: 50px;
border-radius: 100px 100px 0 0;
background: #f00;
椭圆
width: 100px;
height: 50px;
border-radius: 100px / 50px;
background: #f00;
梯形
height: 0;
width: 120px;
border-bottom: 120px solid #f00;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
平行四边形
width: 160px;
height: 100px;
background: #f00;
transform: skew(30deg);
星星
.test {
width: 0;
height: 0;
margin: 50px 0;
color: #f00;
position: relative;
display: block;
border-right: 100px solid transparent;
border-bottom: 70px solid #f00;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
.test::before {
height: 0;
width: 0;
position: absolute;
display: block;
top: -45px;
left: -65px;
border-bottom: 80px solid #f00;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.test:after {
content: '';
width: 0;
height: 0;
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #f00;
border-right: 100px solid transparent;
border-bottom: 70px solid #f00;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
爱心
.test {
position: relative;
}
.test::before,
.test:after {
content: "";
width: 70px;
height: 115px;
position: absolute;
background: red;
left: 70px;
top: 0;
-webkit-border-radius: 50px 50px 0 0;
-moz-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%;
}
.test: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%;
}