Co je to clip-path?
Tato CSS vlastnost slouží k oříznutí HTML prvku podle zadané ořezové masky. Je to v zásadě obdoba masek, jaké známe v grafických programech typu Adobe Photoshopu atd. S touto vlastností jdou dělat hotové psí kusy.
Jak vytvořit ořezovou masku
Vytvářet ořezovou masku by bylo trochu zdlouhavé a pracné a tak na internetu naleznete spoustu online nástrojů, které vám s tímto pomůžou.
Jako HTML element obrázek
Pro naše pokusy použijeme obrázek <img> - čtverec. Lze ale použít jakýkoliv HTML prvek, např. <div>, <span> atd.
Šestiúhelník
<img class="hexagon1" src="">.hexagon1{
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
<img class="hexagon2" src="">.hexagon2{
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}Rovnostranný šestiúhelník
No to už začíná být zajímavější a ať jsem hledal jak jsem hledal, ořezovou masku pro rovnostranný šestiúhelník vepsaný do čtverce jsme nenašel. A tak jsem oprášil starou dobrou geometrii a pár vzorečků a masku jsem si spočítal sám.
<img class="hexagon3" src="">.hexagon3{
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}
<img class="hexagon4" src="">.hexagon4{
clip-path: polygon(25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%, 0% 50%);
}Místo čtverce obdélník
Další možnost je použít masky pro šestiúhelník (první ukázka) ale neaplikovat je na čtverec, ale na obdélník. Zde je ale potřeba znát přesný poměr stran obdélníku, aby byl výsledek skutečný rovnostranný šestiúhelník.
Autor: Ing. Radek Urban
17. 5. 2023