JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div id="container">
<div id="triangleright"><div>RIGHT</div></div>
<center><div id="srodek">ĹšRODEK</div></center>
<align="right"><div id="triangleleft"><div>LEFT</div></div></align>
</div>
</div>

CSS

body {
background-color: white;
}
#container {
    width:device-width;
    text-align:center;
}
#triangleright {
 width: 0;
 height: 0;
 border-top: 400px solid transparent;
 border-bottom: 400px solid transparent;
 border-left: 800px solid blue;
}
/* For the content in triangle */
#triangleright div{ margin:-10px 0 0 -85px; }

#triangleleft {
 width: 0;
 height: 0;
 border-top: 200px solid transparent;
 border-bottom: 200px solid transparent;
 border-right: 400px solid blue;
display: inline-block;
position: absolute;
top: 0;
}
/* For the content in triangle */
#triangleleft div{ margin:-10px 0 0 25px; }

#srodek {
    display: inline-block;
    margin:0;
    width:100px;
    height: 20px;
    background: #00ff00;
	position: absolute;
	top: 0;
}