css-利用border实现三角形箭头的原理

css样式开发中,有时会使用一个三角形作为箭头的情形,那实现原理是怎样的呢?

抛开理论,按下面流程演变一次,基本能懂个大概了

1、首先,实现一个宽高为100px,边框为20px的盒子(为了便于区分,上下左右边框用了不同颜色):
在这里插入图片描述

2、将宽高大小设为0,变成这样:
在这里插入图片描述

3、再去掉上边界:
在这里插入图片描述

4、最后一步,将左右边界设成透明, 三角形就出来了!!
在这里插入图片描述

实现原理:
主要是利用的盒子边框交叉处的渲染特性。

细心的你会发现,盒子的4个角的其实是会有两条边界重叠:
在这里插入图片描述
这4个角空间会依照对角线去划成2部分,然后分给相邻两条边界。
理解了这个之后,后面的2,3,4步就水到渠成了

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值