@@Gunnar Bittersmann

Alles ohne #part, für Deko braucht man keine HTML Elemente, da reicht ein ::before.

Ja, natürlich. Das hatte ich auch kurz überlegt. Aber da es sich um eine andere Figur (und nicht um Deko) handelt, hab ich der ein eigenes div-Element spendiert.

Ob nun Extra-Element oder Pseudo-Element: potato, potato (po-tay-to, po-tah-to).

Das Ding soll jedenfalls auch ein Quadrat sein: aspect-ratio: 1. (Es ginge auch height: 100%, aber ich wollte auf die vielleicht weniger gewöhnliche Variante hinweisen.)

Dann drehen wir das Ding: rotate: 45deg.

Die Schnittpunte mit unserem ursprünglichem Quadrat sollen dessen Kanten dritteln; da kommt nun wieder etwas Mathematik zum Wochenende ins Spiel, auch wenn schon Wochenanfang ist.

Die Kantenlänge des grünen Quadrats soll ⅔√2 der des ursprünglichen sein, also skalieren wir: scale: calc(2/3 * sqrt(2)).

Und zu guter Letzt schneiden wir die Ecken ab:

Darunter eine [Variante], für die es in MDN noch keine Doku gibt und die Chrome 139 braucht. [sic! Gemeint war Chromium 139]

border-radius: 25%; corner-shape: notch, siehe Thread Neue CSS-Features in Chromium …

So sieht’s dann aus: Variante 1

Eine andere Möglichkeit ist, die Figur mit clip-path: polygon() auszuschneiden: Variante 2.

Eine Abwandlung davon: mit o.g. rotate: 45deg; scale: calc(2/3 * sqrt(2)) hat man keine Drittel und Sechstel, sondern Viertel, also ganzzahlige Prozentwerte: Variante 3.

Die vierte von @Rolf B’s Varianten: zwei Rechtecke, erzeugt mit Gradienten, zurechtgestutzt mit background-size. Das geht aber nur mit opaker Farbe, nicht mit transparenter wie #00800080 (die Fläche sollte gleichmäßig gefüllt sein): Variante 4

🖖 Live long and prosper