JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<nav>
<ul class="grid">
<li class="a">Block 1</li>
<li class="b">Block 2</li>
<li class="c">Block 3</li>
</ul>
</nav>

CSS

nav {
  container-type: inline-size;
}
.grid {
  display: grid;
  grid: "a" auto "b" auto "c" auto / 1fr;
  gap: 2px;
  padding: 0 50px;
}
@container (min-width: 25em) {
  .grid {
    grid: ". b b ." auto "a a c c" auto / 1fr 1fr 1fr 1fr;
  }
}
@container (min-width: 40em) {
  .grid {
    grid: "a b c"  auto / 1fr 1fr 1fr;
  }
}
.grid li {
  list-style: none;
  background-color: blue; 
  color: white;
  text-align: center;
  margin: 0;
  padding-block: 0.5em;
}
.grid li.a {
  grid-area: a;
	padding-left: 50px;
	clip-path: polygon(0% 50%, 50px 0%, 100% 0%, 100% 100%, 50px 100%);
  margin-left: -50px;
}
.grid li.b {
  grid-area: b;
}
.grid li.c {
  grid-area: c;
	padding-right: 50px;
	clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 50%, calc(100% - 50px) 100%, 0% 100%);
  margin-right: -50px;
}