JSFiddle - React, Tailwind, and code Playground

by Boba Poshtar

HTML

<br><br><br><br><br>
<div>
  <span class="gamburger"></span>
</div>

CSS

.gamburger {
  position: relative;
  display: block;
  width: 156px;
  height: 24px;
  background: red;
}
.gamburger:before,
.gamburger:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 32px;
}
.gamburger:before {
  bottom: 100%;
  border-top: 24px solid orange;
}
.gamburger:after {
  top: 100%;
  border-bottom: 24px solid aqua;
}