为CSS三角形添加边框 [英] Adding border to CSS triangle

问题描述

我有一个三角形

<div class="triangle-left"></div>


.triangle-left {
    width: 0; 
    height: 0; 
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
    border-right: 22px solid white;
}

考虑到border本身是用来制作三角形的，如何绘制CSS三角形的轮廓?外部div?

How do I draw the outline of a CSS triangle, considering border itself is used to make the triangle? External divs?

推荐答案

一种方法是创建一个较小的内部三角形.

One way to do it is the create an inner triangle which is smaller.

.triangle-left {
    width: 0;
    height: 0;
    border-top: 23px solid transparent;
    border-bottom: 23px solid transparent;
    border-right: 23px solid red;
}

.inner-triangle {
    position: relative;
    top: -20px;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 20px solid blue;
}

<div class="triangle-left">
    <div class="inner-triangle"></div>
</div>

这篇关于为CSS三角形添加边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！