[css] CSS画一个三角形，CSS绘制空心三角形

原创

533_ 2022-12-21 10:15:29 博主文章分类：css ©著作权

文章标签 css CSS 宽高背景色 文章分类 OpenStack 云计算

©著作权归作者所有：来自51CTO博客作者533_的原创作品，请联系作者获取转载授权，否则将追究法律责任

1.不同理解的边框

<div class="border"></div>

.border {
    width: 50px;
    height: 50px;
    border: 2px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

[css] CSS画一个三角形，CSS绘制空心三角形_宽高

将border设置大一点

.border {
    width: 50px;
    height: 50px;
    border: 50px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

[css] CSS画一个三角形，CSS绘制空心三角形_背景色_02

当border足够宽，这才反应过来border就像我们在生活中见过的相框，它是由四个梯形拼凑而成。中间白色区域就是元素的宽高，

现在我们将元素宽高去除掉：

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: #96ceb4 #ffeead #d9534f #ffad60;
}

[css] CSS画一个三角形，CSS绘制空心三角形_背景色_03

那么现在你想要什么颜色的三角形呢？比如我要中国红，那就将上，左右边框颜色设置为透明，这样就得到了一个红色三角形
将上，左右边框颜色设置为透明

.border {
    width: 0;
    height: 0;
    border: 50px solid;
    border-color: transparent transparent #d9534f;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_04

当然这样还不够完美，我们可以看到虽然上方没颜色，还是占据了部分高度，对于强迫症来说真的不舒服，我们再将上边框高度去除掉。

[css] CSS画一个三角形，CSS绘制空心三角形_css_05

将上边框高度去除掉。

.border {
    width: 0;
    height: 0;
    border-bottom: 50px solid #d9534f;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 0;
}

这样就是一个比较完美的三角形了：

[css] CSS画一个三角形，CSS绘制空心三角形_背景色_06

2.CSS画一个空心三角形（只有边框)

那么现在我们想画一个只有边框的空心三角形怎么做呢，首先三角形本身就是由border实现，所以没法在border上添加border了，最直接的办法就是再新建一个小一点的三角形定位上去。

这里我使用伪类再定义一个小一点三角形，可以看到是这样：

.border {
    width: 0;
    height: 0;
    border-style:solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}
.border:after{
    content: '';
    border-style:solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 0;
    left: 0;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_07

可以看到小三角顶端与大三角形对齐，且小三角形左侧恰好与大三角形中心部分对齐。这是因为伪类元素定位参照对象的内容区域没有任何东西，在我们没隐藏其它三个三角形之前，四个三角形的中心就是父级元素。

那么进行简单定位微调，可以看到效果变成这样：

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #96ceb4;
    position: absolute;
    top: 6px;
    left: -40px;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_08

最后我们将小三角形的边框颜色换成白色，那么一个只有边框的空心三角形就诞生了：

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 40px 40px;
    border-color: transparent transparent #fff;
    position: absolute;
    top: 6px;
    left: -40px;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_09

3.实现一个箭头

实现一个箭头就更好说了，我们将定位的三角形设置的与之前的三角形一样大，简单定位，比如这样：

.border:after {
            content: '';
            border-style: solid;
            border-width: 0 50px 50px;
            border-color: transparent transparent green;
            position: absolute;
            top: 6px;
            left: -50px;
        }

[css] CSS画一个三角形，CSS绘制空心三角形_css_10

再将背景色改成白色即可：

.border:after {
            content: '';
            border-style: solid;
            border-width: 0 50px 50px;
            border-color: transparent transparent #fff;
            position: absolute;
            top: 6px;
            left: -50px;
        }

[css] CSS画一个三角形，CSS绘制空心三角形_宽高_11

.border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #fff;
    position: absolute;
    top: 6px;
    left: -50px;
}

.border:hover{
    border-top: 50px solid rgb(126, 212, 177);
    border-bottom: 0;
}

.border:hover::after{
    border-top: 50px solid #fff;
    border-bottom: 0;
    margin-top: -62px;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_12

分析：

把白色换成蓝色看看

.border:hover{
    border-top: 50px solid rgb(126, 212, 177);
    border-bottom: 0;
}

.border:hover::after{
    border-top: 50px solid rgb(125, 145, 211);
    border-bottom: 0;
    margin-top: -62px;
}

[css] CSS画一个三角形，CSS绘制空心三角形_背景色_13

把margin去掉看看

.border:hover{
     border-top: 50px solid rgb(126, 212, 177);
     border-bottom: 0;
 }
 .border:hover::after{
     border-top: 50px solid rgb(125, 145, 211);
     border-bottom: 0;
 }

[css] CSS画一个三角形，CSS绘制空心三角形_宽高_14

当然也可以用::before和::after一起写

.border {
     width: 0;
     height: 0;
     position: relative; 
 }
 .border::before{
     content: '';
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 0;
     border-bottom: 50px solid #d9534f;
     position: absolute;
     top: 0;
     left: 0;
 }

 .border:after {
     content: '';
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 0;
     border-bottom: 50px solid #7dc71b;
     position: absolute;
     top: 6px;
     left: 0px;
 }

[css] CSS画一个三角形，CSS绘制空心三角形_css_15

换成白色

[css] CSS画一个三角形，CSS绘制空心三角形_css_16

.border:hover:before{
    border-top: 50px solid rgb(126, 212, 177);
    border-bottom: 0;
}
.border:hover::after{
    border-top: 50px solid rgb(17, 66, 228);
    border-bottom: 0;
    margin-top: -12px;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_17

换成白色

.border {
            width: 0;
            height: 0;
            position: relative; 
            margin:30px auto;
        }
        .border::before{
            content: '';
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 0;
            border-bottom: 50px solid #d9534f;
            position: absolute;
            top: 0;
            left: 0;
        }

        .border:after {
            content: '';
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 0;
            border-bottom: 50px solid #7dc71b;
            position: absolute;
            top: 6px;
            left: 0px;
        }
        .border:hover:before{
            border-top: 50px solid rgb(126, 212, 177);
            border-bottom: 0;
        }
        .border:hover::after{
            border-top: 50px solid #fff;
            border-bottom: 0;
            margin-top: -12px;
        }

[css] CSS画一个三角形，CSS绘制空心三角形_宽高_18

总结：

用::after写

.border {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #d9534f;
    position: relative;
}

.border:after {
    content: '';
    border-style: solid;
    border-width: 0 50px 50px;
    border-color: transparent transparent #fff;
    position: absolute;
    top: 6px;
    left: -50px;
}

.border:hover{
    border-top: 50px solid rgb(126, 212, 177);
    border-bottom: 0;
}

.border:hover::after{
    border-top: 50px solid #fff;
    border-bottom: 0;
    margin-top: -62px;
}

[css] CSS画一个三角形，CSS绘制空心三角形_css_12

用::before ::after写

.border {
            width: 0;
            height: 0;
            position: relative; 
            margin:30px auto;
        }
        .border::before{
            content: '';
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 0;
            border-bottom: 50px solid #d9534f;
            position: absolute;
            top: 0;
            left: 0;
        }

        .border:after {
            content: '';
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-top: 0;
            border-bottom: 50px solid #7dc71b;
            position: absolute;
            top: 6px;
            left: 0px;
        }
        .border:hover:before{
            border-top: 50px solid rgb(126, 212, 177);
            border-bottom: 0;
        }
        .border:hover::after{
            border-top: 50px solid #fff;
            border-bottom: 0;
            margin-top: -12px;
        }