在开发移动端项目时，总是遇到很多小三角，之前一直用图片，感觉好麻烦，今天尝试了直接用CSS写出小三角！
先看看如何写出各种小三角！
1 /*箭头向上*/ 2 .arrow-up { 3 width:0; 4 height:0; 5 border-left:30px solid transparent; 6 border-right:30px solid transparent; 7 border-bottom:30px solid #000; 8 } 9 10 /*箭头向下*/ 11 .arrow-down { 12 width:0; 13 height:0; 14 border-left:30px solid transparent; 15 border-right:30px solid transparent; 16 border-top:30px solid #000; 17 } 18 19 /*箭头向左*/ 20 .arrow-left { 21 width:0; 22 height:0; 23 border-top:30px solid transparent; 24 border-bottom:30px solid transparent; 25 border-right:30px solid #000; 26 } 27 28 /*箭头向右*/ 29 .arrow-right { 30 width:0; 31 height:0; 32 border-top:30px solid transparent; 33 border-bottom: 30px solid transparent; 34 border-left: 30px solid #000; 35 } 36 37 /*:after 伪元素在元素之后添加内容实现小三角*/ 38 .box{ width:300px; height:300px; background:#838383; position:relative;} 39 .box:after{ 40 position:absolute; 41 right:-20px; 42 top:10px; 43 display:block; 44 content:""; 45 width:0; 46 height:0; 47 border-top:20px solid transparent; 48 border-bottom: 20px solid transparent; 49 border-left: 20px solid #838383; 50 }