JSFiddle - React, Tailwind, and code Playground

by Avdhut Sonpethkar

HTML

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

CSS

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



} 
#octagon:before { content: ""; position: absolute; top: 10; left: 0; border-bottom: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0;


} 
#octagon:after { content: ""; position: absolute; bottom: 10; left: 0; border-top: 29px solid red; border-left: 29px solid #eee; border-right: 29px solid #eee; width: 42px; height: 0; }