JSFiddle - React, Tailwind, and code Playground

by nchaves

HTML

<div class="triangle down blue"><span>This is triangle text.<br/>It looks pretty<br/>good<br/>here.</span></div>
<div class="triangle down red"><span>x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x</span></div>

CSS

body { font-family:Helvetica; }

.triangle.blue { border-color:#4070F0; color:#fff; }
.triangle.red { border-color:#F05050; color:#000; }

.triangle {
  border:100px solid;
  width:0;
  height:0;
  position:relative;
  margin:8px 0;
}
.triangle.down {
  border-right-color:transparent !important;
  border-left-color:transparent !important;
  border-bottom-color:transparent !important;
  margin-bottom:-100px;
}
.triangle span {
  position:absolute;
  text-align:center;
}
.triangle.down span {
  top:-95px;
  left:-80px;
  width:160px;
}