CSS 三角——带边框的三角

值得注意的是，right 值右移的距离值是 border 的两倍，要想使三角的边框和 div 边框一致，需要使三角组合得到的边框像素和 div border 像素一致，如果 div border 是1px，那么大的三角形和小的三角形边框差就需要为1px，大三角移动的距离和小三角移动的距离差则为2px，多运行几次代码即可理解。可以使用伪元素 before 和 after来做，其效果就相当于在标签的内

墨问莫问645

4718人浏览 · 2022-08-20 22:22:58

墨问莫问645 · 2022-08-20 22:22:58 发布

CSS三角之前我就写过一次，CSS 三角的运用可以使网页中常见的一些三角形不需要做成图片或者字体图标，其原理简单，方便实用，做法大致如下：

用 css 边框实现三角效果
宽度和高度设为 0
四个边框都不能省略，保留所需边框颜色，余者改为 transparent 透明即可
为照顾兼容性需加上 font-size: 0; line-height: 0;

代码：

div {
        width: 0;
        height: 0;
        border: 50px solid transparent;
        border-color: transparent transparent blue transparent;
        line-height: 0;
        font-size: 0;
        margin: 100px auto;
    }

那么如何写一个带边框的三角呢？简单来说，就是在原来的三角上再叠加一个三角，进行相应调整即可实现“带边框的三角”；可以使用伪元素 before 和 after来做，其效果就相当于在标签的内部放置一个最前或者最后的标签，添加的标签可以继承父元素的属性，那么通过伪元素就可以组装出带边框的小三角。具体做法如下：

在 div 中添加伪元素，其中一个的尺寸多 1 px
设置 position: absolute; 定位，使其浮动，使 before 和 after 三角重叠在一起
通过定位把三角移到 div 边框的合适位置上
把 after 三角的颜色调整为适合的颜色即可实现带边框的小三角

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>带边框的三角</title>
</head>
<style>
    div {
        position: relative;
        top: 30px;
        left: 100px;
        width: 200px;
        height: 200px;
        border: #ccc solid 1px;
    }
    
    div:before {
        width: 0px;
        height: 0px;
        position: absolute;
        top: 23px;
        right: -16px;
        padding: 0;
        border: 8px solid transparent;
        border-color: transparent transparent transparent #fff;
        content: '';
        z-index: 12;
    }
    
    div:after {
        width: 0px;
        height: 0px;
        position: absolute;
        top: 22px;
        right: -18px;
        padding: 0;
        border: 9px solid transparent;
        border-color: transparent transparent transparent #ccc;
        content: '';
        z-index: 10
    }
</style>

<body>
    <div></div>
</body>

</html>

代码效果：

注意：值得注意的是，right 值右移的距离值是 border 的两倍，要想使三角的边框和 div 边框一致，需要使三角组合得到的边框像素和 div border 像素一致，如果 div border 是1px，那么大的三角形和小的三角形边框差就需要为1px，大三角移动的距离和小三角移动的距离差则为2px，多运行几次代码即可理解。