Adding border to CSS triangle [duplicate]

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>

Expand snippet

Leave a Comment