CSSBattle 15.84: Junction Solution

Approach

4 sticks placing clock-wise

Flip horizontally or vertically with negative

or value of

Result: 100% match

Implementation

1<div class="container">
2  <div class="stick"></div>
3  <div class="stick"></div>
4  <div class="stick"></div>
5  <div class="stick"></div>
6</div>
7<style>
8  body {
9    margin: 0;
10    background: #191919;
11    display: flex;
12    height: 100%;
13    justify-content: center;
14    align-items: center;
15  }
16  .container {
17    display: grid;
18    place-items: center;
19  }
20  .stick {
21    grid-area: 1/1;
22    width: 40px;
23    height: 200px;
24    border-bottom-left-radius: 40px;
25    border-bottom-right-radius: 40px;
26  }
27  .stick:nth-child(1) {
28    background: #fe5f55;
29    transform: translateY(-120px);
30  }
31  .stick:nth-child(2) {
32    background: #a64942;
33    transform: translateX(120px) rotate(90deg);
34  }
35  .stick:nth-child(3) {
36    background: #fe5f55;
37    transform: translateY(120px) scaleY(-1);
38  }
39  .stick:nth-child(4) {
40    background: #a64942;
41    transform: translateX(-120px) rotate(-90deg) scaleX(-1);
42  }
43</style>

Other Battle #15 solutions

#81 - Odoo

#82 - Diamond Cut

#83 - Supernova

#84 - Junction

#85 - Pythagoras

#86 - Stairway

References

Original challenge