So i have a hexagonal image and when i do ng-repeat i want the result to be as follows.
The width of the container has to be 448px and the images need to be responsive. This is what i have tried.
HTML
<div class="hexagons">
<img src="images/hexagon5.png" alt="">
<img src="images/hexagon6.png" alt="">
<img src="images/hexagon5.png" alt="">
<img src="images/hexagon6.png" alt="">
</div>
CSS
.hexagons {
max-width: 448px;
height: 800px;
position: relative;
}
.hexagons img:nth-child(even) {
position: relative;
top: -115px;
left: 193px;
}
.hexagons img:nth-child(odd) {
position: relative;
}
The result:
Can someone please guide me through this.