JSFiddle - React, Tailwind, and code Playground

by Vanss472

HTML

<div id="letsee" class="leftarrowdiv">
			This is a test
</div>

http://www.dynamicdrive.com/style/csslibrary/item/css_triangle_arrow_divs/

CSS

#letsee {
  margin: 10px 0 0 20px;
}

.leftarrowdiv {
width:300px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: #f7a11a;
color:white;
padding: 15px 10px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;

}

.leftarrowdiv:after { /*arrow added to leftarrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:20px;
left:-20px; /*should be set to -border-width x 2 */
width:0;
height:0;
border-color: transparent #f7a11a transparent transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}