JSFiddle - React, Tailwind, and code Playground

by Mukul kant

HTML

<div id='shape'></div>

CSS

div {
  disolay: inline-block;
  margin: 20px;
  float: left;
}


#shape {
    width: 208px;
    height: 130px;
    background: red;
    position: relative;
}
 
#shape:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;    
    border-bottom: 29px solid red;
    border-right: 29px solid #fff;
    width: 179px;
    height: 0;
}
 
#shape:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;    
    border-top: 29px solid red;
    border-left: 29px solid #fff;
    width: 42px;
    height: 0;
}