JSFiddle - React, Tailwind, and code Playground

by Andres Cisneros

HTML

<div></div>

CSS

div {
  width:300px;
  height:170px;
  margin:100px;
  border-top: 1px black solid;
  border-bottom: 1px black solid;
  position: relative;
}

div:after, div:before {
   content: "";
   position: absolute;
   top: -1px;
   width: 20px;
   height: 172px;
   border-top: 40px white solid;
   border-bottom: 40px white solid;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
}

div:before { border-left: 1px black solid; left: 0; }
div:after { border-right: 1px black solid; right: 0; }