Welcome to CSSBattle Challenges!
In this short article, I review my solution for CSSBattle - #32 Band-aid challenge. Please refer to the code snippet below for better insight into my thought processes and the implementation details.
Challenge:
Solution:
<div class="container">
<div class="layer-1"></div>
<div class="layer-2"></div>
<div class="layer-square"></div>
</div>
<style>
body, * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
}
.layer-1 {
width: 50px;
height: 200px;
background: #F3AC3C;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.layer-2 {
width: 200px;
height: 50px;
background: #A3A368;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
}
.layer-square {
width: 50px;
height: 50px;
background: #FBE18C;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg)
}
</style>
Key Takeaway(s):
- use multiple transform attributes as translate and rotate to shift and rotate elements
As always, I welcome any feedback or questions regarding the implementation details of the challenge. Otherwise, I hope this was useful!
Top comments (0)