border制作三角形的技巧(面试题)

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title></title>
 6 <style>
 7 .triangle{
 8 width: 0px;
 9 height: 0px;
10 border-width: 100px;
11 border-style: solid;
12 border-color: red green blue yellow;
13 }
14 .triangle{
15 width: 0px;
16 height: 0px;
17 border-width: 60px;
18 border-style: solid;
19 border-color: transparent transparent  red transparent;
20 transform: rotate(180deg);
21 margin-left: 80px;
22 }
23 .box{
24 width: 400px;
25 height: 400px;
26 background-color: red;
27 border-radius: 80px;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="box">
33 </div>
34 <div class="triangle"></div>
35 </body>
36 </html>

border制作三角形的原理总结:

  • 利用border的3个属性:border-width/border-style/border-color去实现;
  • 宽度和高度要为0,实现一个由4个小三角形构成的正方形;
  • 要啥方向的三角形,只需要保留这个方向的颜色值,其余方向的颜色值设为透明即可,画出三角形然后旋转即可;
  • 三角形的大小由border-width边框线的宽度去控制
  • 三角形的颜色由border-color边框线的宽度去控制
posted @ 2020-10-27 15:11  鬼牛阿飞  阅读(385)  评论(0编辑  收藏  举报