< Back to Frontend Friday Folks Index

Tight Corner

Highlighted solution (513 characters)
1 
<div></div>
2 
<div b></div>
3 
<style>
4 
  &{background:#D25B70}
5 
  div {
6 
    position:fixed;
7 
    inset: 0 0 calc(50% + 20px);
8 
    background:#F7F3DA;
9 
  }
10 
  div:before,div:after {
11 
    content:'';
12 
    position:absolute;
13 
    width:50%;
14 
    height:40px;
15 
  }
16 
  div:before{
17 
    bottom:-20;
18 
    border-radius:0 10px;
19 
    background:#D25B70;
20 
  }
21 
  div:after{
22 
    bottom:-20;
23 
    right:0;
24 
    border-radius:0 0 0 20px;
25 
    background:#F7F3DA;
26 
  }
27 
  [b]{
28 
    transform-origin:50% calc(100% + 20px);
29 
    rotate:180deg;
30 
  }
31 
</style>
The first idea we had - I wanted to finish it, even though B Suraj came in and had the fantastic idea to create it in a different way by stacking two divs on top of each other. So this solution is basically using pseudo elements to make use of the full width and go a bit over the end of the div.
Highlighted solution (371 characters)
1 
<div></div>
2 
<div b></div>
3 
<style>
4 
  &{background:#F7F3DA}
5 
  div {
6 
    position:fixed;
7 
    inset: 110px 50% 0 0;
8 
    border-radius: 0 10px;
9 
    background:#D25B70;
10 
  }
11 
  div:before {
12 
    content:'';
13 
    position:absolute;
14 
    inset:40px 0 -20px 0;
15 
    border-radius:0 20px;
16 
    background:#F7F3DA;
17 
  }
18 
  [b]{
19 
    transform-origin:100% 40px;
20 
    rotate:180deg;
21 
  }
22 
</style>
As mentioned above, the second one was a cleaner version based on the idea that B Suraj had. I think this could be used to make a fun animation as well...! 🤔
Highlighted solution (1107 characters)
1 
<x>
2 
<r>
3 
<div></div>
4 
<div></div>
5 
<div></div>
6 
<div></div>
7 
<div></div>
8 
<div></div>
9 
<div></div>
10 
<div></div>
11 
<div></div>
12 
<div></div>
13 
<div></div>
14 
</r>
15 
</x>
16 
<style>
17 
  body{background:#4c4;margin:0;display:grid;place-items:center}
18 
  x{animation:lip 1s infinite alternate;display:grid;height:80px;width:100%;overflow:hidden;place-items:center;align-content:center}
19 
  r{display:flex;justify-content:center;align-items:center;height:80px;width:100%;overflow:hidden;background:linear-gradient(#F7F3DA 10px,#d25b70 0 calc(100% - 10px),#F7F3DA 0)}
20 
  div {
21 
    flex-grow:1;
22 
    position:relative;
23 
    border-radius:10px;
24 
    background:#d25b70;
25 
    height:100%;
26 
  }
27 
  div:before {
28 
    inset:50% 0 -20px;
29 
    content:'';
30 
    position:absolute;
31 
    border-radius:20px;
32 
    background:#F7F3DA;
33 
    animation: teeth 1s infinite alternate;
34 
  }
35 
  div:nth-child(even){
36 
    transform-origin:50% 50%;
37 
    rotate:180deg;
38 
  }
39 
  @keyframes lip {
40 
    from {
41 
      height:80px;
42 
    }
43 
    to {
44 
      height:0px;
45 
    }
46 
  }
47 
  @keyframes teeth {
48 
    from {
49 
      inset:50% 0 -20px;
50 
    }
51 
    to {
52 
      inset:30% 0 -20px;
53 
    }
54 
  }
55 
</style>
Well, here is an animation that came to my mind when working on the solution for the puzzle. I guess this should go into some kind of animal. 😅
< Back to Frontend Friday Folks Index