JSFiddle - React, Tailwind, and code Playground

HTML

<div class="figure"></div>

CSS

body {
  padding: 100px;
}

.figure {
  width: 71px;
  height: 114px;
  background: orange;
  position: relative;
  border-top: 3px solid green;
  border-bottom: 3px solid green;
}

.figure:before {
  content: '';
  position: absolute;
  width: 71px;
  height: 71px;
  background: orange;
  -webkit-transform: rotateZ(45deg) skew(8deg, 8deg);
  top: 20px;
  left: -38px;
  border-left: 3px solid green;
   border-bottom: 3px solid green;
 }

.figure:after {
  content: '';
  position: absolute;
  width: 71px;
  height: 71px;
  background: orange;
  -webkit-transform: rotateZ(45deg) skew(8deg, 8deg);
  top: 20px;
  right: -38px;
  border-top: 3px solid green;
  border-right: 3px solid green;
 }