CSS Battle #61 – ImprovMX #950
Narigo
started this conversation in
CSS Battles
Replies: 1 comment
-
Sorry for not making it on Friday - not sure if anybody was there, but I mentioned this puzzle as the one that would be on today. I solved it now. Code Source – 600.01 {1180}<r>
<div t></div>
<div b></div>
<div d></div>
</r>
<p w1></p>
<p w2></p>
<style>
body{
background: #191919;
margin: 76 0;
}
r{
display: grid;
place-items: center;
}
div {
box-sizing:border-box;
border: 10px solid #5DBCF9;
margin-top: -10px;
}
[t] {
height: 40px;
width: 50px;
}
[b] {
height: 70px;
width: 100px;
}
[d]{
border:0;
display: flex;
position:relative;
-webkit-box-reflect: right;
}
[d]::before,[d]::after {
position: absolute;
content:'';
box-sizing:border-box;
border: 0;
border-top:45px solid #0000;
border-bottom:135px solid #0000;
border-right: 78px solid #5DBCF9;
left:-78;
top:-35;
}
[d]::after {
left:-65;
top:-21;
border-top:35px solid #0000;
border-bottom:106px solid #0000;
border-right: 60px solid #191919;
}
[r]{
transform:scaleX(-1);
}
[w1],[w2] {
position: absolute;
border: 10px solid #191919;
background: #5DBCF9;
width: 200px;
height: 10px;
translate: 90px 12px;
}
[w2] {
width: 110px;
translate: 135px 32px;
border-bottom-width: 100;
}
</style> |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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