IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

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
Tvůrce
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
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jenkings
Tvůrce
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..
Avatar
Jenkings
Tvůrce
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í
+2,50 Kč
Ř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.