CSS中利用border实现三角形箭头

分类: 文章 • 2025-03-16 19:32:27

1.首先，实现一个宽高为30px,边框为20px的盒子(分别设置上，下，左，右边框用不同颜色，方便区分)：
CSS中利用border实现三角形箭头效果：

2.将宽高设置为0，变成这样：

3、如果我们只想要top的三角形实现步骤把相邻的三角形设置为透明(transparent) 不需要设置底部：