| Autor | Zpráva | ||
|---|---|---|---|
| Kcko Profil |
#1 · Zasláno: 26. 4. 2022, 12:11:34
Ahoj,
přemýšlím, jestli lze vůbec vyřešit toto: (čtverec v rodiči je otočený, aby emuloval "šipku"), normálně by to fungovalo, ale ne když je pozadí s opacitou. jsbin.com/vemaqatimu/edit?html,css,output Zkoušel jsem to vyřešit přes clip-path, ale minimálně v Chromu, vidím 1px linku, které se nedokáži zbavit jsbin.com/vemaqatimu/7/edit?html,css,output Lze to udělat tu šipku přes "triangle" shape (klasika), ale zajímá mě jestli lze nějak rozumně spojit 2 opacity vrstvy přes sebe, neví někdo nebo jsem dneska úplně vygumovanej? |
||
| Firibix Profil |
#2 · Zasláno: 26. 4. 2022, 12:44:14
Reakce na Kcka:
Nešlo by tu „šipku“ udělat SVG pozadím? article:after {
content: "";
width: 50px;
height: 25px;
position: absolute;
left: 50%;
margin-left: -25px;
bottom: -25px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 50 25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 50,0 25,25'/%3E%3C/svg%3E");
background-size: 100% 100%;
opacity: 0.3;
} |
||
| Kcko Profil |
#3 · Zasláno: 26. 4. 2022, 12:52:38
Firibix:
Ahoj, díky. Šipku lze udělat čímkoliv (prostým CSS = Generátor CSS šipek)) V tomto případě mě zajímalo spíš jak propojit obe poloprůhledné vrstvy a spojit je do jedné, ale přijde mi, že to ničím nejde (ne aspoň tím, co v CSS znám ;-)) Btw. ten polygon sis vygeneroval kde? |
||
| Firibix Profil |
Reakce na Kcka:
„mě zajímalo spíš jak propojit obe poloprůhledné vrstvy a spojit je do jedné, ale přijde mi, že to ničím nejde (ne aspoň tím, co v CSS znám ;-))“ Asi rychleji odpovídám, než čtu :-). Tak co udělat clip-path nad celým <article>, a vyříznout jím i tu šipku?
article {
background: rgb(0 0 0 / 0.3);
width: 500px;
height: 500px;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, calc(50% + 25px) 100%, 50% calc(100% + 25px), calc(50% - 25px) 100%, 0 100%)
}
article:after {
content: "";
width: 50px;
height: 25px;
position: absolute;
left: 50%;
margin-left: -25px;
bottom: -25px;
background: rgb(0 0 0 / 0.3);
}„ten polygon sis vygeneroval kde?“ Ten jsem napsal ručně. |
||
| Kcko Profil |
#5 · Zasláno: 26. 4. 2022, 13:36:25
Firibix:
Slušný harakiri ;) , je to hezké ale zbytečně moc složité, ale uložím si to. K původní otázce tedy asi nic, myslím, že to nejde. Nakonec jsem to udelal klasickým trianglem, ale díky topicu jsem zase o něco chytřejší ;-) Dík. |
||
|
Časová prodleva: 3 roky
|
|||
0