一、利用: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
一、利用: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>:after制作小三角
二、利用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>