Welcome to CSSBattle Challenges!
In this short article, I go through my solution for CSSBattle - #21 SitePoint Logo 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="bar orange"></div>
<div class="bar blue"></div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
background: #222;
position: relative;
}
.bar {
position: absolute;
width: 100px;
height: 80px;
background: transparent;
top: 50%;
left: 50%;
border-top-left-radius: 10px;
border-bottom-right-radius: 5px;
}
.orange {
transform: translate(-62px, -64px) rotate(-45deg);
border-left: 30px solid #F2994A;
border-top: 30px solid #F2994A;
}
.blue {
transform: translate(-40px, -16px) rotate(135deg);
border-left: 30px solid #2D9CDB;
border-top: 30px solid #2D9CDB;
}
</style>
Key Takeaway(s):
- using border properties to create "L" like shapes
As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Top comments (0)