CSSBattle 15.82: Diamond Cut Solution

Approach

3 squares

Pseudo-elements on the 2nd square

Result: 100% match

Implementation

1<div class="container">
2  <div class="square square-1"></div>
3  <div class="square square-2"></div>
4  <div class="square square-3"></div>
5</div>
6<style>
7  body {
8    background: #f3ac3c;
9  }
10  .container {
11    height: 100%;
12    margin-left: -5px;
13    transform: rotate(45deg);
14  }
15  .square {
16    position: absolute;
17    top: 50%;
18    left: 50%;
19    transform: translate(-50%, -50%);
20  }
21  .square-1 {
22    width: 160px;
23    height: 160px;
24    background: #998235;
25  }
26  .square-2 {
27    width: 100px;
28    height: 100px;
29    background: #f3ac3c;
30  }
31  .square-2:before,
32  .square-2:after {
33    content: "";
34    position: absolute;
35    background: #f3ac3c;
36  }
37  .square-2:before {
38    width: 60px;
39    height: 30px;
40    top: 50%;
41    transform: translate(-75%, -50%);
42  }
43  .square-2:after {
44    width: 30px;
45    height: 60px;
46    left: 50%;
47    transform: translate(-50%, -75%);
48  }
49  .square-3 {
50    width: 30px;
51    height: 30px;
52    background: #1a4341;
53  }
54</style>

Other Battle #15 solutions

#81 - Odoo

#82 - Diamond Cut

#83 - Supernova

#84 - Junction

#85 - Pythagoras

#86 - Stairway

References

Original challenge