DEV Community

Prakhar Tandon
Prakhar Tandon

Posted on

CSS Battle Target#6

Hey everyone👋,
CSSBattle Series is back✨!

In this article, we would be covering the Target#6 "Missing Slice" on CSSBattle

Here's the required output.
Target6 Missing Slice

It would be more beneficial for you, if you first try the challenge on your own, then looking up the solution given below.

The best approach I could come up till now is stated below.

I learned about the conic gradient function, which can be really helpful for generating such patterns.

<p><style> 
*{
margin:25.1 33.2;
background:#E3516E}
p{
width:200px;height:200px; 
background:conic-gradient(
#FADE8B,25%,#FADE8B,25%,
#E3516E,50%,#F7F3D7,50%,
#F7F3D7,75%,#51B5A9 75%);
border-radius:50%;
}
Enter fullscreen mode Exit fullscreen mode

This was my shortest solution condensing to 191 characters.

Comment down your way of doing the same.
Stay Tuned for daily updates regarding all the challenges on CSSBattle.

Want to connect?

You can connect with me here

Discussion (2)

Collapse
romulus profile image
Robert

This is the solution I came up with. Still miles away from the top results @_@;

<p><style>*{background:#E3516E}p{width:100%;height:100%;background:conic-gradient(#FADE8B 25%,0,#E3516E 50%,0,#F7F3D7 75%,0,#51B5A9);clip-path:circle(29.6%)

Collapse
prakhart111 profile image
Prakhar Tandon Author

Hey Robert, that's a good solution.
I myself wasn't aware of "clip-path" property.

Thanks and Cheers!