JSFiddle - React, Tailwind, and code Playground

by Zhe Qian

HTML

<div class="triangle triangle-bottom-up"></div>
<div class="triangle triangle-right-angled"></div>
<div class="triangle triangle-not-isosceles"></div>
<div class="triangle triangle-regular"></div>
<div class="triangle triangle-all-borders"></div>

CSS

.triangle {
    float: left;
    clear: both;
    margin-bottom: 30px;
    width: 0;
    height: 0;
}

.triangle-bottom-up {
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid red;
    border-left: 20px solid transparent;
}

.triangle-right-angled {
    border-top: 20px solid transparent;
    border-right: 20px solid green;
    border-bottom: 20px solid green;
    border-left: 20px solid transparent;
}

.triangle-not-isosceles {
    border-top: 10px solid transparent;
    border-right: 20px solid blue;
    border-bottom: 10px solid blue;
    border-left: 20px solid transparent;
}

.triangle-regular {
    border-top: 10px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 30px solid black;
    border-left: 40px solid transparent;
}


.triangle-all-borders {
    border-top: 10px solid red;
    border-right: 20px solid green;
    border-bottom: 30px solid blue;
    border-left: 40px solid black;
}