Hallo alle,

ich hab da eine Liste:

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

Die Elemente sind als Grid nebeneinandergesetzt

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2px;
  padding: 0 50px;
}
.grid li {
  list-style: none;
  background-color: blue; 
  color: white;
  text-align: center;
  margin: 0;
  padding-block: 0.5em;
}

Die 50px im Padding sind symbolisch für's Beispiel.

Nun möchte ich das erste und das dritte List Item "anspitzen". Das kann ich mit ::before/::after und geschickter Border machen, aber das führt ggf. zu Rundungsfehlern und einer feinen Lücke zwischen li und ::after. Bäh.

Darum hatte ich die alternative Idee mit clip-path. Wie gesagt, die 50px sind symbolisch, eigentlich ist's ein var(), und das würde hier alles aufblähen.

.grid li.a {
  padding-left: 50px;
  clip-path: polygon(0% 50%, 50px 0%, 100% 0%, 100% 100%, 50px 100%);
  margin-left: -50px;
}
.grid li.c {
  padding-right: 50px;
  clip-path: polygon(0% 0%, calc(100% - 50px) 0%, 100% 50%, calc(100% - 50px) 100%, 0% 100%);
  margin-right: -50px;
}

Das Padding ist nötig, damit der Inhalt nicht in den Pfeilbereich hineinragt. Dadurch wird der Inhaltsbereich des li aber schmaler. Interessanterweise bewirkt die negative Margin-Angabe, dass der betreffende li-Rand aus der Gridzelle hinausgezogen wird UND das li um die 50px breiter wird. Die Gridzellen an sich bleiben gleich breit.

Aber dieser Margin scheint mir ein blöder Hack, der eher zufällig als absichtlich funktioniert, und ich frage mich, wie ich dem Grid korrekt sage, dass die erste und letzte Spalte die Breite "calc(50px + 1fr)" bekommen sollen. Hinschreiben kann ich das so nicht, das ist wohl ungültige Syntax.

Anschauungsmaterial, etwas komplexer…

Oder geht's nicht anders als so?

Rolf