So let’s get started!
The result will be like the following!
- Grey Half Circle Position 70% 70%
- White Half Circle Position 30% 30%
- Neatness 100% 100%
In detail we have to add the above code not only in the Custom Css ‘before’ and ‘after’ boxes of below section but also in that of the above one.
Then we have to change the ‘top’ property to ‘bottom’ and change accordingly its value to 50px; finally we change the ‘left’ value fo each half circle as we want (in our case we set 10% and 90% for the above section, 40% and 60% for the below one).
We also add some box-shadow to our half circles with a simple line of code:
- Half Circle One 10% 10%
- Half Circle Two 40% 40%
- Half Circle Three 60% 60%
- Half Circle Four 90% 90%
Hope these example can be useful. Feel free to comment below and see you next post!