V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.
Tak přesně toto nejde udělat.
Ale. Lze to pofejkovat tak, že to tak bude vypadat, pokud víš, jaké pod tím bude pozadí (ideálně jedna barva),
Uděláš normální div, který bude overflow hidden. Pak třeba ::after toho divu nastyluješ na kruh s šířkou toho divu a napozicuješ ho tak, aby to překrývalo, s pozadím jako barva za divem.
Tím docílíš efektu, že je div takovéhoto tvaru. Určitě by šlo nějak vymyslet řešení, které bude ještě lepší, avšak takovéto tvary jsou dost hard na výrobu.
nebo můžeš nastylovat spodní okraj (border-bottom) , s tím že ten
border uděláš z obrázku který si vytvoříš.
Tzn, uděláš si ten vykousnutý tvar tak aby ti barva seděla s divem, a
zbytek bude průhledný (tzn. uložíš to jako png nebo gif).
Výhoda je v tom, že když budeš měnít například pozadí stránky, nebo
nějaký jiný element, tak ti to pozadí bude vždy sedět, tím že to bude
průhledné. A když budeš měnit ten div, tak automaticky upravíš i ten
obrázek, protože to s tím přímo souvisí.
a nebo ještě jedna možnost, asi nejčistší, když nechceš používat obrázky, by šlo použít
<svg>
<path ........................................ />
</svg>
Zobrazeno 5 zpráv z 5.
