欢迎光临
我的个人博客网站

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

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边框线的宽度去控制
赞(0) 打赏
未经允许不得转载:张拓的天空 » border制作三角形的技巧(面试题)
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏