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.
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%;
}
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.
Top comments (2)
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%)Hey Robert, that's a good solution.
I myself wasn't aware of "clip-path" property.
Thanks and Cheers!