JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="triangle-holder">
    <div id="triangle-1"></div>
    <div id="triangle-2"></div>
    </div>
</body>

CSS

body {
background-image: url('http://miriadna.com/desctopwalls/images/max/Ideal-landscape.jpg');
margin: 0;
padding: 0;
   
}

#triangle-1 { 
    width: 0; 
    height: 0; 
    border-bottom: 30vw solid red; 
    border-right: 100vw solid transparent;
    float: left;
}

#triangle-2 { width: 0; height: 0; border-bottom: 30vw solid red; border-left: 100vw solid transparent; }

#triangle-holder {
position: absolute;
bottom: 0;
}