I have a list with all our team members.
In the design there are 15 different shapes, which fit into each other. So in the perfect situation you would have:
|shape1|shape2|shape3|shape4|shape5|
|shape6|shape7|shape8|shape9|shape10|
|shape11|shape12|shape13|shape14|shape15|
But the width of that section is 100% so what happens is:
|shape1|shape2|shape3|shape4|shape5|shape6|shape7|
|shape8|shape9|shape10|shape11|shape12|
|shape13|shape14|shape15|shape1|shape2|
So what happens is that shape 6 floats next to 5. But that shape6 should be shape1 again. Because that would fit.
So it would be
|shape1|shape2|shape3|shape4|shape5|shape1|shape2|
|shape6|shape7|shape8|shape9|shape10|
|shape11|shape12|shape13|shape14|shape15|
What I basicly need is that every LI element next to a LI element with shape5 turns into a shape1 instead of shape6.
the shapes are added through svg elements(this x 15) HTML
<svg width="0" height="0">
<clipPath id="polygon-1">
<polygon fill="#939598" points="183,172.776 89.16,172.776 -6.231,189.785 -0.174,1.02 170.255,37.688 "/>
</clipPath>
</svg>
CSS
.team article.image-shape.polygon-1{
-webkit-clip-path: url(#polygon-1);
}
I am not quit sire how to tackle this problem. If you guys have any suggestions I could look into, it would be very helpful.
What have I been trying?
I have been counting the LI elements within the UL and adding the 6th one class one, but obviously that isn't working when you are scaling down because you would get:
|shape1|shape2|shape3|shape4|shape5|
|shape1|shape7|shape8|shape9|shape10|
|shape11|shape12|shape13|shape14|shape15|