[J.....L]

#webdev #naukaprogramowania mam takie pytanie, zrobiłem sobie divy, które po użyciu atrybutu css: rotate , ułożyły się ukosnie w przeciwległych rogach tworząc dokładni taki lay-out jaki zamierzałem osiągnąć. Niestety ale po zoom-owaniu przeglądarki divy się rozjeżdzają i nie zachowują swojego przeznaczenia - mimo, że głowny container w którym się znajdują ma display:flex . Jest jakaś metoda by divy nie poruszały się pod i zostały tam na stałe ? java script ? a może coś prostego w css'ie ?

[k__d]

divy

@JungleJamPL: erosoman jeden, zboczeniec #pdk

[Krall]

@JungleJamPL: position: fixed/absolute;

[J.....L]

@k__d: xD

[J.....L]

@Krall: to już mam. Bez tego divy w ogóle nie układają się na powierzchni obrazka. ¯ _(- _ -)_/¯

[Krall]

@JungleJamPL: To obrazek nie jest jako background?

[Krall]

@JungleJamPL: Wrzuć codepena

[J.....L]

@Krall: nie obrazek jest jako image a potem width: 100% heigth: 100vh; tu jest code pen :
https://codepen.io/anon/pen/oKNVdp

[januzi]

@JungleJamPL: rodzic relatywny, wtedy możesz olać marginesy i ustawić warstwy tak jak należy, po ludzku: top left right bottom (i z procentami, a nie na sztywno w px). Jak trzeba coś jeszcze, to translateX, translateY.

[januzi]

@JungleJamPL:
.slanted.a {
right: 0;
top: -40%;
}
.slanted.b {
bottom: -40%;
}
.slanted {
overflow: hidden;
position: absolute;
opacity: 0.35;
z-index: 5;
background-color: black;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
border: 2px solid white;
width: 10%;
height: 100%;
}

[J.....L]

@januzi: trzeba było dać rodzica relatywnego, i divy w procentach i gra, także dzięki wielkie za bardzo cenne wskazówki. Teraz śmiga jak nalezy