| Autor | Zpráva | ||
|---|---|---|---|
| klaxon Profil |
Potreboval by som vytvorit elipsovity utvar obdlznik ktory by mal z prava aj zlava polkruh...
Skusim to vyjadrit cislami pri obdlzniku velkosti: 250x50 ma utvar border-radius: 25px vlastne ten utvar musi mat vzdy: border-radius: height / 2; Zial height dopredu neviem. border-radius: 50% pouzit nemozem lebo ten pocita 50% nie len z vysky ale aj zo sirky. chcel som na to pouzit ::before a ::after pseudo elementy a nastavit im border-radius 50% a rozmiestnit ich z lava a z prava (vytrcala by polovica kruhu) ale to tiez nejde lebo: ::before, ::after { content: ''; display: block; border-radius: 50% height: 100%; width: malo by mat rovnaku velkost ako height ale tu nevieme } |
||
| Serg Profil |
#2 · Zasláno: 17. 10. 2020, 16:04:36
Podle css set border-radius relative to height
První odpověď: border-radius: 50vh;
Další možnost: Nastavit tam nějakou vysokou hodnotu, např. 500px. Zkousel jsem a vypadá to, že to fakt funguje. |
||
| anonym_ Profil * |
#3 · Zasláno: 17. 10. 2020, 23:42:05
Serg:
Začni tím, ze si zjistíš, co jednotka vh znamená, nez ji budes mylně radit druhým. |
||
| Serg Profil |
#4 · Zasláno: 18. 10. 2020, 10:17:42
Ten anonym asi naráží na to, že se první možnost může chovat nepředvídatelně. Ve skutečnosti vlastně využívá "hack" z druhé možnosti, nastaví border-radius na velké číslo, akorát že na velikost odpovídající 50% viditelné plochy stránky u uživatele, takže u každého rozlišeni to může být trochu jiné. Navíc kdyby si někdo zmenšil okno prohlížeče např. na 400x400, tak to pro útvary s výškou větší než 200px přestane správně fungovat. Jistější je rovnou nastavit např.
border-radius: 500px nebo 5000px.
Funkčnost ověřena jen ve Firefoxu. Kdyby se někdo hodně nudil, tak to může ověřit i v ostatních prohlížečích a dát vědět. |
||
| anonym_ Profil * |
#5 · Zasláno: 18. 10. 2020, 11:30:57
Serg:
Nejsem si ani jistý tím, ze nastavení hodně velké hodnoty se má dle specifikace chovat tak, jak píšeš. A ano, ono to možná funguje, ale není to rozhodne čisté řešení a ani není zaručeno, ze se to tak bude chovat všude a vždy. Pokud to tedy nemá oporu ve specifikaci, což si myslím, ze nemá. Nebo má? Můžeš ji doložit? |
||
| Serg Profil |
#6 · Zasláno: 18. 10. 2020, 13:51:10
Border-radius in percentage (%) and pixels (px) or em
www.w3.org/TR/css-backgrounds-3/#corner-overlap Zatím to funguje ne? Na čisté řešení tu může klaxon čekat klidně týden, měsíc, ...rok. Nebo bys o nějakém věděl? Tak sem s ním. :) |
||
| barkel Profil |
#7 · Zasláno: 19. 10. 2020, 12:27:07
Serg: Ďakujem vám za radu... Neni to sice oficialna vlastnost ale zatial to funguje. Ked to prestane fungovat tak vymyslim nieco ine napr. SVG
Ospravedlnujem sa ze nepisem pod nickom klaxon (ale zabudol som heslo), ale zistil som ze tu mam este jeden profil. Chodim sem dost sporadicky a zakazdym zabudnem ze tu uz mam profil |
||
|
Časová prodleva: 3 roky
|
|||
0