Transform(rotate) zmiana położenia

Question

Witam!

Posiadam 3 kwadratowe divy i na dwa z nich nakładam białą linię za pomocą transform(rotate), później ustawiam position:relative. Mój problem polega na tym, że przy rozdzielczości 1366x768 wygląda to idealnie, lecz gdy tylko zmienię wysokość/ szerokość przeglądarki te linię się po prostu rozjeżdzają i nie są w divie.

Wstawiam kod z jsfiddle, pierwszy div załóżmy, że ma tak wyglądać, jednak 3 się już rozjechał. Ma ktoś może jakieś porady :)?

http://jsfiddle.net/L4w378kx/

Answer 1

Tak źle podchodzisz do tematu :) takie rzeczy robi się za pomocą :before :after poniżej daje link do przydatnego tematu:

https://css-tricks.com/almanac/selectors/a/after-and-before/

 

A jak już coś takiego robisz to do lini dodaj position: absolute; top: 0px; left: 0px;   : )

Comments

Ok dziękuję bardzo za konkretną odpowiedź. Wieczorem spróbuję to sprawdzić i jeśli się nie uda odezwę się po wskazówki :).

---

No i jednak mam pytanie :) Czyli najlepiej jeśli bym utworzył tą linię w PS i tam ją obrócił o właściwy kąt, później importował to do diva z pseudoelementem befor/after :)?

Np.

#kwadrat1::before

{

 content: url(linia.jpg);

position:absolute;

left,top:[ustawienie gdzie ma dokładnie być położona linia];

}

Bo robiąc to na elemncie <hr /> i używając do tego after i before nie działa zmiana kąta linii :)

Dobrze rozumiem, że mam to zrobić tak jak napisałem wyżej?

---

Możesz coś takiego zrobić ja osobiście zrobił bym to jako np

#kwadrat1:before {

content : " ";  <-- nie zapominaj o tym :)

display: block;

position: relative;

width: 20px;

height: 5px;

transform: ...;

i dla #kwadrat daj overfolow: hidden;

 

Możesz to też zrobić w PS nie ma problemu :)

---

Zrobiłem to Twoim sposobem :) Niby robiłem podobnie, ale po Twoim przykładzie zadziałało ;p Dziękuję bardzo za pomoc!!! :))