V některých případech se hodí kreslit pomocí CSS – může to být rychlejší než příprava obrázku v grafickém editoru.
Kruh jde vytvořit pomocí zakulacení rohů (CSS vlastnost border-radius).
Udělat z kruhu ovál jde potom změnou proporcí elementu (poměr výšky a šířky).
Pro vytvoření elipsy poslouží možnost uvést druhý radius za lomítko.
border-radius: 100px / 50px;
height: 100px;
width: 200px;
Co si myslíte o tomto článku?
Diskuse
Související články
CSS item-pack: balance – vyvážené rozložení flex položek
Vlastnost item-pack: balance rozděluje flex položky rovnoměrně mezi řádky, podobně jako text-wrap: balance vyvažuje řádky textu.
CSS Container Queries – responsivní komponenty
Jak pomocí @container, container-type a container-name vytvářet komponenty, které se přizpůsobí velikosti svého rodiče místo viewportu.
CSS Anchor Positioning – posicování elementů relativně k jiným
Jak pomocí anchor-name, position-anchor a funkce anchor() posicovat elementy relativně k jiným bez JavaScriptu.
Centrování na webových stránkách
Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.