JSFiddle - React, Tailwind, and code Playground

HTML

<div id="flag"></div>

CSS

body { background-color: #e0e0e0; }

#flag { 
width: 400px; height: 80px; position: relative;
}

#flag:before { 
content: ""; 
position: absolute; 
top: 0; 

width: 365px; 
height: 0; 
border-top: 40px solid #402020; 

border-bottom: 40px solid #204020; 

border-left: 35px solid transparent;

outline: 1px solid yellow;
}

#flag:after { 
content: ""; 
position: absolute; 
left: 400px; 
bottom: 0; 
width: 0; 
height: 0; 
border-top: 40px solid transparent;

border-bottom: 40px solid transparent;

border-left: 45px solid #202040;

outline: 1px solid magenta;
}