Kształt kontenera - zaokrąglone rogi (prawy górny róg ścięty)

1. Nadajemy kontenerowi klasę np. cut-corner

2. Ustawiamy zaokrąglenie "DO PRAWEJ" na wartość 100px, aby zaokrąglić lekko rogi, resztę zaokrągleń ustawiamy według preferencji.

3. Wklejamy kod CSS:

.cut-corner {
overflow: hidden;

clip-path: polygon(
0 0, /* lewy górny róg */
calc(100% - 80px) 0, /* odcinamy 20px od prawej krawędzi na górze */
100% 80px, /* górny prawy "ścięty" punkt */
100% 100%, /* prawy dolny róg */
0 100% /* lewy dolny róg */
);
}

Czy uważasz, że ten artykuł jest przydatny?