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 {
  font-size: 1.1rem;
  --cont-height: 1.5em;
  container-type: inline-size;
}
.grid {
  display: grid;
  grid: "a a ." auto
        ". b ." auto 
        ". c c" auto / var(--cont-height) 1fr var(--cont-height) ;
  gap: 2px;
  padding: 0;
}
@container (min-width: 25em) {
  .grid {
    grid: ". . b b . ." auto
          "a a a c c c" auto / var(--cont-height) 1fr 1fr 1fr 1fr var(--cont-height) ;
  }
}
@container (min-width: 40em) {
  .grid {
    grid: "a a b c c"  auto / var(--cont-height) 1fr 1fr 1fr var(--cont-height);
  }
}
.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: var(--cont-height);
	clip-path: polygon(0% 50%, var(--cont-height) 0%, 100% 0%, 100% 100%, var(--cont-height) 100%);
}
.grid li.b {
  grid-area: b;
}
.grid li.c {
  grid-area: c;
	padding-right: var(--cont-height);
	clip-path: polygon(0% 0%, calc(100% - var(--cont-height)) 0%, 100% 50%, calc(100% - var(--cont-height)) 100%, 0% 100%);
}