JSFiddle - React, Tailwind, and code Playground

by Madalina Taina

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;
   
    transform: rotate(45deg);
    border: 3px solid red;
}
.octagon:before {
    position: absolute;
    /* There needs to be a negative value here to cancel
     * out the width of the border. It's currently -3px,
     * but if the border were 5px, then it'd be -5px.
     */
    top: -3px; right: -3px; bottom: -3px; left: -3px;
    transform: rotate(45deg);
    content: '';
    border: inherit;
}