< Back to Frontend Friday Folks Index

Letter B

Visit the official puzzle page (affiliate link!) to play it yourself. If you buy a course from CSSBattle through my affiliate link, I receive a share of it!

Highlighted solution (449 characters)
1 
<div></div>
2 
<style>
3 
  body {
4 
    background:#6592CF;
5 
    place-items: center;
6 
    margin: 80px -80px 0px 0px;
7 
  }
8 
  div,div:before,div:after {
9 
    content:'';
10 
    position:absolute;
11 
    width: 100px;
12 
    height: 80px;
13 
    background: var(--c,#515DBD);
14 
    border-radius: 0 40px 40px 0;
15 
    -webkit-box-reflect: below -20px;
16 
    &:before{
17 
      --c:#2E3B9F;
18 
      left:-40px;
19 
    }
20 
    &:after{
21 
      --c:#060F55;
22 
      left:-80px;
23 
    }
24 
  }
25 
</style>

Feels like quite a while that I've used -webkit-box-reflect. This was quite nice using a single div with pseudo-elements, becoming essentially like 6 elements with the reflect!

< Back to Frontend Friday Folks Index