JSFiddle - React, Tailwind, and code Playground

by RAX7

HTML

<ul class="list">
  <li class="list__item">Lorem ipsum</li>
  <li class="list__item">Molestiae</li>
  <li class="list__item">Assumenda ab</li>
  <li class="list__item">Debitis maiores</li>
</ul>

CSS

.list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #fff;
}

.list__item {
  flex: 1 1 auto;
  padding: 15px;
  padding-left: 25px;
  margin-left: -15px;
  white-space: nowrap;
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5));
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%, 15px 50%);
}

.list__item:first-child {
  margin-left: 0;
  padding-left: 15px;
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

.list__item:last-child {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 15px 50%);
}

body {
  margin: 25px;
  font-family: sans-serif;
  background: #111 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='30' viewBox='0 0 1000 120'%3E%3Cg  fill='none' stroke='%23222' stroke-width='10' stroke-opacity='1'%3E%3Cpath d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3Cpath d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/%3E%3C/g%3E%3C/svg%3E") center;
}