1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .arrow{ 8 width: 20px; 9 height: 20px; 10 border-top: 1px solid red; 11 border-left: 1px solid red; 12 transform: rotate(45deg); 13 margin: 50px 0 0 50px; 14 } 15 </style> 16 </head> 17 <body> 18 <div class="arrow"></div> 19 </body> 20 </html>
不切图片的情况下如何制作箭头和小三角形的形状(面试题)?如上代码,三角形箭头原理:正方形的任意相邻的两边线然后旋转一定的角度，得到我们需要的任意方向的箭头,deg角度单位,rotate旋转角度.
- 小三角形的大小由正方形的宽高去控制
- 小三角形的粗细由border边框线的宽度去控制
- 小三角形的颜色由border边框线的颜色去控制