本文共 7493 字，大约阅读时间需要 24 分钟。

1.上三角

#triangle-up {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid red;}

2.下三角

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

3.左三角

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

4.右三角

#triangle-right {  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.右上角

#triangle-topright {  width: 0;  height: 0;  border-top: 100px solid red;  border-left: 100px solid transparent;}复制代码

7.左下角

#triangle-bottomleft {  width: 0;  height: 0;  border-bottom: 100px solid red;  border-right: 100px solid transparent;}

8.右下角

#triangle-bottomright {  width: 0;  height: 0;  border-bottom: 100px solid red;  border-left: 100px solid transparent;}

9.箭头

#curvedarrow {  position: relative;  width: 0;  height: 0;  border-top: 9px solid transparent;  border-right: 9px solid red;  transform: rotate(10deg);}#curvedarrow:after {  content: "";  position: absolute;  border: 0 solid transparent;  border-top: 3px solid red;  border-radius: 20px 0 0 0;  top: -12px;  left: -9px;  width: 12px;  height: 12px;  transform: rotate(45deg);}

10.梯形

#trapezoid {  border-bottom: 100px solid red;  border-left: 25px solid transparent;  border-right: 25px solid transparent;  height: 0;  width: 100px;}

11.星星（五角）

#star-five {  margin: 50px 0;  position: relative;  display: block;  color: red;  width: 0px;  height: 0px;  border-right: 100px solid transparent;  border-bottom: 70px solid red;  border-left: 100px solid transparent;  transform: rotate(35deg);}#star-five:before {  border-bottom: 80px solid red;  border-left: 30px solid transparent;  border-right: 30px solid transparent;  position: absolute;  height: 0;  width: 0;  top: -45px;  left: -65px;  display: block;  content: '';  transform: rotate(-35deg);}#star-five:after {  position: absolute;  display: block;  color: red;  top: 3px;  left: -105px;  width: 0px;  height: 0px;  border-right: 100px solid transparent;  border-bottom: 70px solid red;  border-left: 100px solid transparent;  transform: rotate(-70deg);  content: '';}

12.爱心

#heart {  position: relative;  width: 100px;  height: 90px;}#heart:before,#heart:after {  position: absolute;  content: "";  left: 50px;  top: 0;  width: 50px;  height: 80px;  background: red;  border-radius: 50px 50px 0 0;  transform: rotate(-45deg);  transform-origin: 0 100%;}#heart:after {  left: 0;  transform: rotate(45deg);  transform-origin: 100% 100%;}

13.菱形

#diamond {  width: 0;  height: 0;  border: 50px solid transparent;  border-bottom-color: red;  position: relative;  top: -50px;}#diamond:after {  content: '';  position: absolute;  left: -50px;  top: 50px;  width: 0;  height: 0;  border: 50px solid transparent;  border-top-color: red;}

14.钻石

#cut-diamond {  border-style: solid;  border-color: transparent transparent red transparent;  border-width: 0 25px 25px 25px;  height: 0;  width: 50px;  box-sizing: content-box;  position: relative;  margin: 20px 0 50px 0;}#cut-diamond:after {  content: "";  position: absolute;  top: 25px;  left: -25px;  width: 0;  height: 0;  border-style: solid;  border-color: red transparent transparent transparent;  border-width: 70px 50px 0 50px;}

15.对话泡泡

#talkbubble {  width: 120px;  height: 80px;  background: red;  position: relative;  -moz-border-radius: 10px;  -webkit-border-radius: 10px;  border-radius: 10px;}#talkbubble:before {  content: "";  position: absolute;  right: 100%;  top: 26px;  width: 0;  height: 0;  border-top: 13px solid transparent;  border-right: 26px solid red;  border-bottom: 13px solid transparent;}

16. 12点 爆发

#burst-12 {  background: red;  width: 80px;  height: 80px;  position: relative;  text-align: center;}#burst-12:before,#burst-12:after {  content: "";  position: absolute;  top: 0;  left: 0;  height: 80px;  width: 80px;  background: red;}#burst-12:before {  transform: rotate(30deg);}#burst-12:after {  transform: rotate(60deg);}

17. 8点 爆发

#burst-8 {  background: red;  width: 80px;  height: 80px;  position: relative;  text-align: center;  transform: rotate(20deg);}#burst-8:before {  content: "";  position: absolute;  top: 0;  left: 0;  height: 80px;  width: 80px;  background: red;  transform: rotate(135deg);}

18.太极

#yin-yang {  width: 96px;  box-sizing: content-box;  height: 48px;  background: #eee;  border-color: red;  border-style: solid;  border-width: 2px 2px 50px 2px;  border-radius: 100%;  position: relative;}#yin-yang:before {  content: "";  position: absolute;  top: 50%;  left: 0;  background: #eee;  border: 18px solid red;  border-radius: 100%;  width: 12px;  height: 12px;  box-sizing: content-box;}#yin-yang:after {  content: "";  position: absolute;  top: 50%;  left: 50%;  background: red;  border: 18px solid #eee;  border-radius: 100%;  width: 12px;  height: 12px;  box-sizing: content-box;}

19.放大镜

#magnifying-glass {  font-size: 10em;  display: inline-block;  width: 0.4em;  box-sizing: content-box;  height: 0.4em;  border: 0.1em solid red;  position: relative;  border-radius: 0.35em;}#magnifying-glass:before {  content: "";  display: inline-block;  position: absolute;  right: -0.25em;  bottom: -0.1em;  border-width: 0;  background: red;  width: 0.35em;  height: 0.08em;  transform: rotate(45deg);}

20.月亮

 

#moon {  width: 80px;  height: 80px;  border-radius: 50%;  box-shadow: 15px 15px 0 0 red;}

21.旗

#flag {  width: 110px;  height: 56px;  box-sizing: content-box;  padding-top: 15px;  position: relative;  background: red;  color: white;  font-size: 11px;  letter-spacing: 0.2em;  text-align: center;  text-transform: uppercase;}#flag:after {  content: "";  position: absolute;  left: 0;  bottom: 0;  width: 0;  height: 0;  border-bottom: 13px solid #eee;  border-left: 55px solid transparent;  border-right: 55px solid transparent;}复制代码

22.十字架

 

#cross {  background: red;  height: 100px;  position: relative;  width: 20px;}#cross:after {  background: red;  content: "";  height: 20px;  left: -40px;  position: absolute;  top: 40px;  width: 100px;}

22.指示器

 

#pointer {  width: 200px;  height: 40px;  position: relative;  background: red;}#pointer:after {  content: "";  position: absolute;  left: 0;  bottom: 0;  width: 0;  height: 0;  border-left: 20px solid white;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;}#pointer:before {  content: "";  position: absolute;  right: -20px;  bottom: 0;  width: 0;  height: 0;  border-left: 20px solid red;  border-top: 20px solid transparent;  border-bottom: 20px solid transparent;}复制代码

 

23.锁

#lock {  font-size: 8px;  position: relative;  width: 18em;  height: 13em;  border-radius: 2em;  top: 10em;  box-sizing: border-box;  border: 3.5em solid red;  border-right-width: 7.5em;  border-left-width: 7.5em;  margin: 0 0 6rem 0;}#lock:before {  content: "";  box-sizing: border-box;  position: absolute;  border: 2.5em solid red;  width: 14em;  height: 12em;  left: 50%;  margin-left: -7em;  top: -12em;  border-top-left-radius: 7em;  border-top-right-radius: 7em;}#lock:after {  content: "";  box-sizing: border-box;  position: absolute;  border: 1em solid red;  width: 5em;  height: 8em;  border-radius: 2.5em;  left: 50%;  top: -1em;  margin-left: -2.5em;}

 

转载地址：http://eelrb.baihongyu.com/