JSFiddle - React, Tailwind, and code Playground

by ruslyrossi

HTML

<div id="octagon"></div>

CSS

#octagon {
	width: 100%;
	height: 200px;
	background: red;
	position: relative;
}

#octagon:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
  border-bottom: 26px solid #f00;
  border-left: 21px solid #fff;
  border-right: 21px solid #fff;
  width: 95%;
	height: 0;
}

#octagon:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 26px solid #f00;
  border-left: 21px solid #fff;
  border-right: 21px solid #fff;
  width: 95%;
  height: 0;
}