So this brain bending challenge requires you to be comfortable with absolute positioning and border-radius.
Goal
Observation of Goal
- For sure Margin of the body need to be zero
- If we observe it carefully we can see that
- A big circle at the bottom
- 2 quarters at the bottom left and top right side
- a small circle at top of the quarters
- All shapes have origin from center
- Red Big circle is the base then we make 2 quarters of yellow color and on top of it is again a circle of red color. Note: It is prudent to guess the size of shapes say width and height rather than manually plugging in value. (Your neurons transmit information way faster than your hands in the editor)
Solution
Combining the above observations we can figure out the code looks similar to the below code
<div class="container">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<style>
body {
background: #E38F66;
}
.container>div {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
/* Big circle */
.container >div:nth-child(1) {
border-color: #AA445F;
border-radius: 50%;
border-width: 100px;
border-style: solid;
z-index: -1;
}
/* Quarter Circle */
.container > div:nth-child(2) {
background: #F7EC7D;
height: 70px;
width: 70px;
transform: translate(0px, -70px);
border-radius: 0 300px 0 0
}
/* Quarter Circle */
.container > div:nth-child(3) {
background: #F7EC7D;
height: 70px;
width: 70px;
transform: translate(-70px, 0px);
border-radius: 0px 0 0 300px
}
/* Small Inside Circle */
.container > div:nth-child(4) {
border-color: #AA445F;
border-radius: 50%;
border-width: 40px;
border-style: solid;
}
</style>
Do let us know how much time you took to achieve the target by yourself in the comments so we can monitor our progress.
Top comments (0)