一、利用:after伪元素制作
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style> 7 .trangle{ 8 width: 170px; 9 height: 30px; 10 cursor: pointer; 11 white-space: normal; 12 display: block; 13 } 14 .trangle:after { 15 content: "25bc"; 16 color:#999; 17 padding-left:100px; 18 } 19 </style> 20 </head> 21 <body> 22 <div class="range"> 23 <span class="trangle">三角形</span> 24 <span class="trangle">三角形</span> 25 <span class="trangle">三角形</span> 26 </div> 27 </body> 28 </html>
二、利用border
动态效果：（鼠标滑过会旋转）
代码一：设置除border-top外，其它三个边框为白色
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 width: 0; 9 height: 0; 10 border:10px solid white; 11 border-top-color:gray; 12 transition:all 1s ease 0s; 13 } 14 div:hover{transform:rotate(180deg);} 15 </style> 16 </head> 17 <body> 18 <div></div> 19 </body> 20 </html>
代码二：
设置border-color为透明
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div { 8 width: 0; 9 height: 0; 10 border-width: 3px; 11 border-style: solid; 12 border-color: #4D4D4D transparent transparent; 13 transition:all 1s ease 0.1s; 14 } 15 div:hover{transform:rotate(180deg);} 16 </style> 17 </head> 18 <body> 19 <div></div> 20 </body> 21 </html>