< 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