< Back to Frontend Friday Folks Index

Mountains

Highlighted solution (485 characters)
1 
<div class="root">
2 
<div class="a"></div>
3 
<div class="b"></div>
4 
</div>
5 
<style>
6 
  body {
7 
    display: grid;
8 
    place-items: center;
9 
    background: #293462;
10 
  }
11 
  .root {
12 
    background: #FFF1C1;
13 
    display: grid;
14 
    border-radius: 50%;
15 
    overflow: hidden;
16 
    height: 200px;
17 
    width: 200px;
18 
    rotate: 225deg;
19 
  }
20 
  .a,.b {
21 
    background: #FE5F55;
22 
    height: 30px;
23 
    width: 130px;
24 
  }
25 
  .b {
26 
    height: 140px;
27 
    margin-left: -30px;
28 
    margin-top: -55px;
29 
  }
30 
</style>
Pretty much the same idea like Sadie: Hide overflows, nest the divs. One of the divs is moved away from the other. By rotating the div (and therefore its children), the mountains appear.
< Back to Frontend Friday Folks Index