JSFiddle - React, Tailwind, and code Playground

by Arnaud

HTML

<div class="shape"></div>

CSS

.shape {
  width: 400px;
  height: 40px;
  background-color: black;
  -webkit-clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 100%, 0 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);  position: relative;
}

.shape:before {
  content: '';
  width: 398px;
  height: 38px;
clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);  background: green;
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
}