JSFiddle - React, Tailwind, and code Playground

HTML

<div id="triangle-down"></div>

CSS

#triangle-down {
    width: 0;
    height: 0;
    border-left: 320px solid transparent;
    border-right: 320px solid transparent;
    border-top: 200px solid red;
}
@media all and (max-width : 800px) {
    #triangle-down {
        width: 0;
        height: 0;
        border-left: 160px solid transparent;
        border-right: 160px solid transparent;
        border-top: 100px solid blue;
    }
}