In the usual front-end development, it is often encountered that the interface design needs to draw various triangles. There are two general solutions. The first one is that UI designers need to design the corresponding triangle Image and directly reference it in the code through the Image label, or introduce the Image conversion icon iconfont into the code. The other way, and the simplest way with better performance, is to implement various common triangles through CSS.

1. Implement a simple triangle

Implementation principle: use CSS box model border implementation, by setting width:0 and height :0 elements, increase the border width to achieve

<div class="organe"></div>
.organe {
    width: 0px;
    height: 0px;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid orange;
}
Copy the code

2. Implement triangles with borders

Implementation principle: Use absolute position, two triangles stacked together

<div class="blue"></div>
.blue {
    position: relative;
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
}

.blue::after {
    content: "";
    position: absolute;
    top: 1px;
    left: -48px;
    border-right: 48px solid transparent;
    border-left: 48px solid transparent;
    border-bottom: 48px solid orange;
}
Copy the code

3. Draw triangles from other angles

Right triangle

<div class="orange"></div>
.orange {
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-bottom: 50px solid orange;
}
Copy the code

Triangular arrow

<div class="blue"></div>
.blue {
    position: relative;
    width: 0px;
    height: 0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid blue;
}

.blue::after {
    content: "";
    position: absolute;
    top: 1px;
    left: -50px;
    border-right: 50px solid transparent;
    border-left: 50px solid transparent;
    border-bottom: 50px solid #F5F5F5;
}
Copy the code