Virtual Coffee
CSS Battle #13 – Totally Triangle #910
Replies: 4 comments 1 reply
-
|
A lot of code whittling today! It was fun @rhdeck and @radturkin! @radturkin, make sure you post your awesome answer! Inline styling with
|
Beta Was this translation helpful? Give feedback.
-
Clip path – 687.89 {159}<div>
<style>
* {
background:#0B2429;
margin:0;
}
div {
width: 141px;
height: 141px;
background: #F3AC3C;
clip-path: polygon(0 0, 100% 0, 0 100%)
}Clip path - minified – 715.87 {130}<div><style> *{background:#0B2429;margin:0}div{width:141px;height:141px;background:#F3AC3C;clip-path:polygon(0 0, 100% 0, 0 100%)} |
Beta Was this translation helpful? Give feedback.
-
Using borders – 660.03 {199}<p>
<style>
*{
background: #0B2429;
margin: 0;
}
p{
width: 0;
height: 0;
border-style: solid;
border-width: 140px 140px 0 0;
border-color: #F3AC3C transparent;
} |
Beta Was this translation helpful? Give feedback.
-
Code Source – 100% 620.25 {313}<div></div>
<style>
body{
background: #0B2429;
}
div {
width: 1px;
height: 1px;
border-bottom: 70px solid transparent;
border-right: 70px solid transparent;
border-left: 70px solid #F3AC3c;
border-top: 70px solid #F3AC3C;
margin-top: -8px;
margin-left: -8px;
}
</style> |
Beta Was this translation helpful? Give feedback.
-
|
I tired margin 0 and it didn't work. Must have put it on the div and not body. just tried on div and cut character count down. 627.74 {280} |
Beta Was this translation helpful? Give feedback.
-
Link to battle:
Let's battle! ⚔️
Copy the code block below to format your comment on the discussion thread:
What others will see:
This will result in a nice hidden bit like so:
Code Source – score {character count}
Beta Was this translation helpful? Give feedback.
All reactions