border制作小箭头的技巧(面试题) 

 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旋转角度.

  1. 小三角形的大小由正方形的宽高去控制
  2. 小三角形的粗细由border边框线的宽度去控制
  3. 小三角形的颜色由border边框线的颜色去控制
posted @ 2020-10-27 14:03  鬼牛阿飞  阅读(382)  评论(0)  编辑  收藏  举报