Cześć,
Mam do zrobienia sekcje składającą się z kilku rombów. Wstępnie planuję zrobić to pozycjonowaniem absolutnym i nadawaniem rozmiarów przez JS. To znaczy każdy romb musi mieć identyczną wysokość i szerokość, więc planuję pobrać najpierw największy content, a później nadać go reszcie elementów. Jak już będą takie same to dorzucę pozycje. Jest to moja pierwsza sekcja tego typu, więc nie wiem czy to najlepszy pomysł. Ma ktoś doświadczenie, a może zna przykład gdzie taki element występuje? Sam romb stylowany jest następująco: https://codepen.io/owline/pen/qBbKwxL
1
4
Masz romby. Resztę sobie dorób:
p.s. W sumie możesz wywalić te DIV-y: odstep_50 i odstep_100 a zamiast tego dodawać odpowiednią klasę modyfikującą lewy margines do samych rombów.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>romby</title>
<style>
* {
box-sizing: border-box;
margin:0px;
padding:0px;
}
.romb {
display:inline-block;
position:relative;
width:100px;
height:100px;
margin-left:50px;
margin-right:50px;
margin-top:50px;
margin-bottom:-50px;
border:1px solid red;
}
.romb::after {
display:block;
position:absolute;
top:-20.71%;
left:-20.71%;
width:141.42%;
height:141.42%;
transform-origin:50% 50%;
transform: rotate(45deg);
content:"";
border:1px solid green;
background-color:#BDEEB4;
z-index:-1;
}
.odstep_100 {
display:inline-block;
width:200px;
height:0px;
}
.odstep_50 {
display:inline-block;
width:100px;
height:0px;
}
</style>
</head>
<body>
<div class="odstep_100"> </div><div class="romb">a</div><br>
<div class="odstep_50"> </div><div class="romb">a</div><div class="romb">a</div><br>
<div class="romb">a</div><div class="romb">a</div><br>
<div class="odstep_50"> </div><div class="romb">a</div><div class="romb">a</div><br>
<div class="odstep_100"> </div><div class="romb">a</div><br>
</body>
</html>
2
Dziękuję za podpowiedź, jednak finalnie poszedłem w inną stronę.
Podzieliłem ten układ na wiersze i zastosowałem clipping mask dla elementów tła (rombu), realne rozmiary boxu pozwalały mi łatwiej nad tym zapanować.
Dodałem też ratio i teraz jest to nieźle skalowalne. Tutaj efekt: https://codepen.io/owline/pen/GRoPzVK