I have a collection of svg files that fit together like pieces of a puzzle to form a circle. What would be the most effective way to arrange them? I attempted placing the segments within a ul with each on top of one another. Since the segment svgs are already correctly rotated, I assumed I could utilize display flex on the wrapper and add spacing between them using the 'gap' property, but unfortunately it doesn't seem to work.
This is my current code:
<div class="expertises-wrap">
<ul class="expertises">
<li>
<img class="slice" src="img/infographic/techniek.svg">
</li>
<li>
<img class="slice" src="img/infographic/aard-warmte-projecten.svg">
</li>
<li>
<img class="slice" src="img/infographic/duurzame-energiezaken.svg">
</li>
<li>
<img class="slice" src="img/infographic/modellering.svg">
</li>
<li>
<img class="slice" src="img/infographic/ruimtelijke-ontwikkeling.svg">
</li>
<li>
<img class="slice" src="img/infographic/corporate-finance.svg">
</li>
<li>
<img class="slice" src="img/infographic/makelaardij.svg">
</l
i>
</ul>
</div>
(S)CSS
.expertises {
position: relative;
width: 500px;
height: 500px;
list-style: none;
display: flex;
gap: 70px;
justify-content: center;
align-items: center;
li {
position:absolute;
img{
width: 250px;
height: auto;
}
}
}
What would be the optimal approach for this scenario?
JSfiddle: https://jsfiddle.net/fyL4r0vu/
Intended result: