CSS简单实现带箭头的边框

时间：2023-04-02 21:46:04 HTML

原文地址https://tianshengjie.cn/artic...css简单实现带箭头的边框normalborder

实现一个由四个三角形组成的正方形

下三角

设置左右底边的颜色为transparent透明，得到一个向下的箭头，把三角形放到border中

设置三角形为绝对定位，使用margin-left和left定位到元素中间，设置bottom为-8px，并且用靠近边框底部的箭头将边框居中

把边框颜色改成漂亮的蓝色，并且前后伪元素都设置为绝对定位，定位在底部框架，将after伪元素设置为白色，bottom偏移量比before大1px，覆盖三角形底部的颜色。这么漂亮的箭头边框就实现了

CSS简单实现带箭头的边框相关文章