JSFiddle - React, Tailwind, and code Playground

HTML

<div class='octagonWrap'>
<div class='octagon'></div>
</div>

CSS

.octagonWrap {
	width:200px;
	height:200px;
	float: left;
	position: relative;
}
.octagon {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	overflow: hidden;
}
.octagon:before {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	transform: rotate(45deg);
	background: #777;
	content: '';
  border: 3px solid red;
}