JSFiddle - React, Tailwind, and code Playground

by Anton Fedoryan

HTML

<div id="wrapper">
  <div id="half-left">
    
  </div>
  <div id="half-right">
    
  </div>
  <div id="middle">
  
  </div>
</div>

CSS

#wrapper
{
  border: 2px solid green;
  width: 301px;
  height: 100px;
  position: relative;
}

#half-left
{
	border-top: 100px solid yellow;
	border-right: 50px solid transparent;
	height: 0;
	width: 150px;
  display: inline-block;
}

#half-right
{
	border-bottom: 100px solid red;
	border-left: 50px solid transparent;
	height: 0;
	width: 100px;
  display: inline-block;
  margin-left: -53px;
}

#middle
{
  position: absolute;
  width: 125px;
  height: 50px;
  top: 25px;
  right: 79px;
  background-color: blue;
}