Sekcja z elementami w kształcie rombów.

1

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
screenshot-20200712001139.png

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

1 użytkowników online, w tym zalogowanych: 0, gości: 1