JSFiddle - React, Tailwind, and code Playground

by homm

HTML

<div style='display: inline-block; border-left: 40px solid transparent; border-bottom: 84px solid #c30; vertical-align: top;'></div><div style='display: inline-block; background-color: #c30; padding: 0 20px; line-height: 84px; height: 84p; text-align: middle; vertical-align: top; color: white;'>Текст Текст Текст </div><div style='display: inline-block; border-right: 40px solid transparent; border-top: 84px solid #c30; vertical-align: top;'></div>

<div style='margin: 20px; width: 0; height: 0; border: 40px solid #c30; border-left-color: yellow; border-top-color: orange; border-right-color: gray;'></div>

<div style='margin: 20px; width: 0; height: 0; border: 40px solid #c30; border-left-color: transparent; border-top-color: orange; border-right-color:  transparent ;'></div>

<div style='margin: 20px; width: 0; height: 0; border: 40px solid #c30; border-left-color: transparent; border-top-color: orange; border-right-width: 0;'></div>

 <div style='margin: 20px; width: 0; height: 0; border: 40px solid #c30; border-left-color: transparent; border-top-width: 0; border-right-width: 0;'></div>

CSS

body {
    background-color: #eee;
}