Zkosení hrany v CSS

Dlouhou dobu bylo v CSS možné (a známé) pouze vytváření objektů ve tvaru čtverců a obdélníků.

1. Pomocí vlastnosti border-radius jde vytvářet kulaté rohy nebo kulaté obrázky.

2. Vhodnou kombinací tloušťky a barvy rámečků jde kreslit šipky/trojúhelníky.

Jak vytvořit něco se zkosenou hranou?

Pomocí border trojúhelníku

Pomocí vytvořeného trojúhelníku z rámečku jde zajistit šikmou hranu.

Trojúhelník je vytvořen pomocí pseudo-elementu :after, který je umístěn za obsah.

Samostatná ukázka – šikmá hrana

Podpora tohoto řešení je vynikající (rámečky fungují všude). Horší je to s vyhlazováním – šikmá hrana může vypadat kostrbatě.

Taktéž nastavení požadovaného zkosení není úplně intuitivní. Nakonec je podmínkou, aby pozadí bloku bylo jednobarevné kvůli napojení.

Oříznutí clip

Jako dělaná je pro tyto případ oříznutí CSS vlastnost clip-path s funkcí polygon:

.sikmy {
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
}

Ta bez problému funguje i s obrázkovým pozadím:

Výsledek:

Nevýhoda je slabší podpora v prohlížečích. Nepravidelné oříznutí podporuje Chrome 24+, Opera 15+ a Safari 8+. Pro lepší podporu je dobré použít CSS prefixy.

Zkosení transform: skewX

CSS transformace skew dokáže zkosit celý element. Zkosení zároveň deformuje i obsah – text – což je nežádoucí. Nabízí se tedy použít deformaci pouze pro pseudo-element, který se potom umístí na správné místo absolutním posicováním.

CSS vlastnost transform a zkosení skewX/skewY je podporováno s prefixy už od IE 9, Firefoxu 3.5, Chrome 4 a Opera 11.5.

Pomocí z-indexu se zkosení umístí za obsah.

Zkosení na obou stranách

Bylo-li by cílem mít zkosené hrany na obou stranách, šlo by element včetně písma zkosit a pouze samotný text vrátit zpět opačnou hodnotou:

Samostatná ukázka – zkosení na obou stranách

Možná u tohoto postupu bude někde problém s vyhlazováním písma.

Bez použití pseudo-elementu by šlo případně jednu šikmou stranu oříznout:

Živá ukázka – oříznutí jedné zkosené hrany

Rotace

Teoreticky by šlo vytvořit šikmou plochu i rotací, ale těžko říct, jestli to přináší nějaké výhody oproti zkosení. Podpora v prohlížečích je obdobná.

Odkazy jinam

• Viget: Angled Edges with CSS Masks and Transforms