All Questions

Coding

How can I make such a shape using CSS? [SOLVED]

I tried with tailwind and nothing and I have also tried with pure CSS…

author Tiago Ferreira

Reply
11 Answers

Look for (SVG) mask. <https//css-tricks.com/clipping-masking-css/>

writen by Benedikt

In Affinity designer you use a star, choose the point count, then round the inside points and round the outside points. Code is a whole different ballgame.

writen by LaLa Artica

João Amaro made this with figma LaLa Artica. But transforming that to code is another story haha

writen by Tiago Ferreira

Thanks <@U02NH9BN5FY>. I tried using clip but could not figure out to to get this result… But João Amaro found a website. What was it João Amaro?

writen by Tiago Ferreira

Then fill with your color

writen by Marc Lou

and place top: 0 right: 0

  • translate x & y by =50% for perfect positioning at the edge

writen by Marc Lou

Thanks for the suggestion Marc Lou Looks good now

writen by Tiago Ferreira

perfect!

writen by Marc Lou

Tiago Ferreira if you have the shape in Figma, and João Amaro used the Figma vectors, you can just right click on the shape, Copy > Copy as SVG

Paste the copied text into a file in your project, like StarShape.svg or use it as the returned JSX of a StarShape.tsx React component.

writen by Luca Restagno (ikoichi on Twitter)

Thanks Luca Restagno (ikoichi on Twitter). that’s what I endup doing and it worked really well

writen by Tiago Ferreira

Do you want to ask a question?


Related Questions