Welcome to CSSBattle Challenges!
In this short article, I go through my solution for CSSBattle - #13 Totally Triangle 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="triangle"></div>
</div>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.container {
width: 100%;
height: 100%;
background: #0B2429
}
.triangle {
border-bottom: 140px solid #F3AC3C;
border-right: 140px solid transparent;
width: 0;
height: 0;
transform: rotate(90deg);
}
</style>
Key Takeaway(s):
- adjust border-bottom and border-right properties to create a triangle
As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!
Top comments (1)
bro, can u help me to learn, how have you create this Content list. I have some project and I want to post it daily content list wise. I need proper instruction to learn it. pls??