CSSBattle 16.91: Reflection Solution

Approach

Elements: sun, sea, 4 lines to represent reflection

Result: 100% match

Implementation

1<div class="rect"></div>
2<div class="circle"></div>
3<div class="ceils">
4  <div class="ceil"></div>
5  <div class="ceil"></div>
6  <div class="ceil"></div>
7  <div class="ceil"></div>
8</div>
9<style>
10  body {
11    margin: 0;
12    background: #d25b70;
13  }
14  .rect {
15    width: 100%;
16    height: 50%;
17    background: #6cb3a9;
18    position: absolute;
19    top: 50%;
20  }
21  .ceils {
22    width: 100%;
23    height: 50%;
24    position: absolute;
25    top: 50%;
26  }
27  .ceils > :not(:first-child) {
28    margin-top: 10px;
29  }
30  .ceil {
31    height: 15px;
32    background: #6cb3a9;
33  }
34  .circle {
35    background: #f6df96;
36    width: 200px;
37    height: 200px;
38    position: absolute;
39    top: 50%;
40    left: 50%;
41    transform: translate(-50%, -50%);
42    border-radius: 100%;
43  }
44</style>

Other Battle #16 solutions

#89 - Summit

#90 - Eclipse

#91 - Reflection

#92 - Sequeeze

#93 - Great Wall

#94 - Ripples

#95 - Pokeball

#96 - Mandala

References

Original challenge