JSFiddle - React, Tailwind, and code Playground

by bradleytrager

HTML

<div id="triangle-left">
  
</div>
<div class="breadcrumb">


</div>
<div id="triangle-right">
  
</div>

<div id="triangle-left">
  
</div>
<div class="breadcrumb">


</div>
<div id="triangle-right">
  
</div>
<div id="triangle-left">
  
</div>
<div class="breadcrumb">

</div>
<div id="triangle-right">
  
</div>

CSS

div {
  float:left;
}
.breadcrumb {
  background:blue;
  width:100px;
  height:100px;
  
}
#triangle-right {
	width: 0;
	height: 0;
	border-top: 50px solid transparent;
	border-left: 50px solid blue;
	border-bottom: 50px solid transparent;
}

#triangle-left {
	width: 0;
	height: 0;
	border-top: 50px solid blue;
	border-left: 50px solid transparent;
	border-bottom: 50px solid blue;
}