JSFiddle - React, Tailwind, and code Playground

by Jed Mao

HTML

<div
    class="
        triangle
        triangle--equilateral
    "
></div>
<div
    class="
        triangle
        triangle--right-isosceles
    "
></div>

CSS

.triangle {
    display: inline-block;
}

.triangle--equilateral {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-top-color: royalblue;
    border-width: 69.28203px 40px 0;
}

.triangle--right-isosceles {
    width: 0;
    height: 0;
    border-style: solid;
    border-color: transparent;
    border-left-color: hotpink;
    border-width: 34.5px 0 34.5px 34.5px;
}