十分钟搞懂CSS属性border相交画三角形的原理及规律

henu_Newxc03

发布于 2022-05-05 18:08:29

5460

文章被收录于专栏：Newxc03的前端之路Newxc03的前端之路

其实很早就了解到可以利用border属性来画三角形，但是当时没认真思考原理和总结规律，写下这篇博客记录下我的想法。

🤔两个结论

分界线原则：假如把有宽度的border靠外的一边叫做外边，靠内的一边叫做内边，则各个外边的交点与相对应各个内边交点的连线就是各border之间的分界线

内边的确定依赖于原div的各边外边的确定依赖于原div的各边以及border的宽度

一刀切原则：某方向的border宽度如果为0，边框的样式会表现出一刀切的样子

🫣举例论证

<div></div>

 div {
        width: 50px;
        height: 50px;
        border: 20px solid red;
      }

常规情况下我们会把边框宽度设的很小，看着像是矩形，但是当我们增大边框宽度

<div></div>

	 div {
        width: 50px;
        height: 50px;
        border: 20px solid;
        border-color: red blue black green;
      }

我们可以很清楚的看到四条边框的分界线

<div></div>

 div {
        width: 50px;
        height: 50px;
        border: 20px solid red;
      }

当原div宽高都为0时，我们可以把div看作一个点

	div {
        width: 50px;
        height: 50px;
        border: solid;
        border-color: red blue black green;
        border-top-width: 20px;
        border-right-width: 0; 
        border-bottom-width: 20px;
        border-left-width: 20px;  
      }

此时右边框宽度为0，我们可以想象宽度为0时就是一刀切掉那部分。

此时右边框宽度为10px,图中的样式再一次佐证了我们的想法

	div {
        width: 50px;
        height: 50px;
        border: solid;
        border-color: red blue black green;
        border-top-width: 20px;
        border-right-width: 10px; 
        border-bottom-width: 20px;
        border-left-width: 20px;  
      }

div {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: solid;
        border-color: red blue black green;
        border-top-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 20px;
      }

加个圆角就可以实现环状图的样式

如果让边框透明显示

div {
        width: 50px;
        height: 50px;
        border: solid;
        border-color: red transparent black green;
        border-top-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 20px;
      }

三边都透明的话就会形成一个梯形

 div {
        width: 50px;
        height: 50px;
        border: solid;
        border-color: transparent transparent transparent green;
        border-top-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 20px;
      }

那么当div宽高为0时，不就得到了一个三角形

 div {
        width: 0;
        height: 0;
        border: solid;
        border-color: transparent transparent transparent green;
        border-top-width: 20px;
        border-right-width: 20px;
        border-bottom-width: 20px;
        border-left-width: 20px;
      }

再来个稍微难点的

	div {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid transparent;
      }

我们一步一步的倒推

	div {
        width: 0;
        height: 0;
        border-top: 100px solid red;
        border-right: 100px solid green;
      }

再推一步

	div {
        width: 50px;
        height: 50px;
        border-top: 100px solid red;
        border-right: 100px solid green;
      }

我们发现，边框始终符合我们的一刀切原则和分界线原则

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-04-30，如有侵权请联系 cloudcommunity@tencent.com 删除

border

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

border

登录后参与评论

0 条评论

热度

十分钟搞懂CSS属性border相交画三角形的原理及规律

十分钟搞懂CSS属性border相交画三角形的原理及规律

🤔两个结论

🫣举例论证

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐