JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
  <div class="left angle">
  
  </div>
  <div class="content">
  </div>
  <div class="right angle">
  
  </div>
  
</div>

CSS

.wrapper {
  border: 1px solid pink;
  width: 300px;
  height: 100px;
  margin: 20px;
  position: relative;
}

.content {
  background-color: blue;
  height: 100%;
}

.left {
  position: absolute;
  left: 0;
  top:0;
  height: 100%;
  width: 20px;
  background-color: green;
}

.left.angle:after,
.left.angle:before {
  left: 10px;
}

.right.angle:after,
.right.angle:before {
  right: -10px;
}


.angle:before {
  content: '';
  width: 20px;
  height: 50%;
  position: absolute;
  left: 0;
  top:0;
  transform: skew(20deg);
  background-color: pink;
}

.angle:after {
  content: '';
  width: 20px;
  height: 50%;
  position: absolute;
  left: 0;
  bottom:0;
  transform: skew(-20deg);
  background-color: pink;
}


.right {
  position: absolute;
  right: 0;
  top:0;
  height: 100%;
  width: 20px;
  background-color: green;
  
}