Welcome to CSSBattle Challenges!
In this short article, I go through my solution for CSSBattle - #31 Equals challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.
Challenge:
Solution:
<div class="container">
<div class="semi-circle left"></div>
<div class="semi-circle right"></div>
</div>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
background: #aa445f;
}
.semi-circle {
width: 200px;
height: 100px;
border-top-right-radius: 100px;
border-top-left-radius: 100px;
position: absolute;
top: 50%;
left: 50%;
}
.right {
background: #e38f66;
transform: translate(calc(-50% + 75px), -50%) rotate(90deg);
}
.left {
background: #f7ec7d;
transform: translate(calc(-50% - 75px), -50%) rotate(-90deg);
}
</style>
Key Takeaway(s):
- create semi-circles with height half the size of the width along with border radius properties
- use multiple transform properties to shift or rotate an element in multiple ways
As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Top comments (2)
Could you automate Target circle app coupon adding?
On it lol