dodání ihned! nové
Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
BF

Diskuze: Div s dovnitř zahnutou spodní stranou

Aktivity
Avatar
lukas.sei
Člen
Avatar
lukas.sei:20.5.2017 20:24

Čaute,
Snažím se již pár hodin přijít na řešení mého problému, ale asi na to nejsem s CSS dostatečně zdatný. Chtěl bych vytvořit div, který by měl spodní stranu zahnutou dovnitř tak, aby kopírovala polovinu kružnice. (Tak jak v obrázku v příloze.)
Mohl by mi s tím prosím někdo pomoct ?
Předem děkuji. :)

 
Odpovědět
20.5.2017 20:24
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na lukas.sei
Honza Bittner:20.5.2017 20:29

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.

Nahoru Odpovědět
20.5.2017 20:29
Student FIT ČVUT. In love with Flutter. :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://g...
Avatar
Jenkings
Redaktor
Avatar
Odpovídá na lukas.sei
Jenkings:21.5.2017 21:26

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í.

Nahoru Odpovědět
21.5.2017 21:26
Největší časovou náročnost má výpočet časové náročnosti..
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jenkings
Redaktor
Avatar
Odpovídá na lukas.sei
Jenkings:21.5.2017 21:30

a nebo ještě jedna možnost, asi nejčistší, když nechceš používat obrázky, by šlo použít

<svg>
  <path ........................................   />
</svg>
Akceptované řešení
+20 Zkušeností
+1 bodů
Řešení problému
Nahoru Odpovědět
21.5.2017 21:30
Největší časovou náročnost má výpočet časové náročnosti..
Avatar
lukas.sei
Člen
Avatar
lukas.sei:24.5.2017 16:37

díky již vyřešeno :)

 
Nahoru Odpovědět
24.5.2017 16:37
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.