Kevin Powell - Community•2mo ago

How do I go about this design?

No codepen because not sure where to start. I was thinking maybe exporting the circles as an svg and using the path as a clip-path? But if I do that, then the green circle on the left would need to be in the image or absolutely positioned on it so not sure how well that would work

12 Replies

lko•2mo ago

I'd go with the clip path as you were saying but add a display grid on the container, so you have 6 boxes, and then you add a circle and you tell it to position on that square and then you add the white box

vince•2mo ago

Sorry I should have included what I have at least:

vince•2mo ago

I have this already, but it needs to be 1 image and not 5 separate images; did I misunderstand what you were trying to say?

lko•2mo ago

I explained myself badly @vince

<section this has the bgimage and the clip and also the display grid>
    <div class="circle" and you position this to be on column 1 and row 2></div>
    <div class="white-bg" and you position this to be from column 1 to 2 and in row 2></div>
</section>

<section this has the bgimage and the clip and also the display grid>
    <div class="circle" and you position this to be on column 1 and row 2></div>
    <div class="white-bg" and you position this to be from column 1 to 2 and in row 2></div>
</section>

Jochem•2mo ago

This is how I'd do it (plz ignore the px widths and stuff, they're just there cause I'm lazy) https://codepen.io/jochemm/pen/ExzjYeX

capt_uhu•2mo ago

here's another option with mask. Done as one element (or one pseudo) as a stand in for a background : https://codepen.io/jsnkuhn/pen/zYQGYNR?editors=1100

vince•2mo ago

tysm everyone! I'll look into these a bit later and let you know how I crack on 🙂

ChooKing•2mo ago

https://codepen.io/chooking/pen/GRaJRPp

lko•2mo ago

instead I came out with this, didnt end up using grid, the colors are ugly but I did it in a rush https://codepen.io/Lko3001/pen/bGydNpo

vince•2mo ago

Very cool solutions guys! I keep saying this but I really need to learn gradients 😂 Also @Jochem I didn't know you could do this:

grid: repeat(2, 1fr) / repeat(3, 1fr);

grid: repeat(2, 1fr) / repeat(3, 1fr);

👀 is that new?

Jochem•2mo ago

nope, just criminally underused it's fully supported too

vince•2mo ago

Wow will definitely start using that over typing grid-template-rows / columns all day lol

Gaming

Programming

How do I go about this design?