< Back to Frontend Friday Folks Index

ImprovMX

Highlighted solution (1179 characters)
1 
<r>
2 
  <div t></div>
3 
  <div b></div>
4 
  <div d></div>
5 
</r>
6 
<p w1></p>
7 
<p w2></p>
8 
<style>
9 
  body{
10 
    background: #191919;
11 
    margin: 76 0;
12 
  }
13 
  r{
14 
    display: grid;
15 
    place-items: center;
16 
  }
17 
  div {
18 
    box-sizing:border-box;
19 
    border: 10px solid #5DBCF9;
20 
    margin-top: -10px;
21 
  }
22 
  [t] {
23 
    height: 40px;
24 
    width: 50px;
25 
  }
26 
  [b] {
27 
    height: 70px;
28 
    width: 100px;
29 
  }
30 
  [d]{
31 
    border:0;
32 
    display: flex;
33 
    position:relative;
34 
    -webkit-box-reflect: right;
35 
  }
36 
  [d]::before,[d]::after {
37 
    position: absolute;
38 
    content:'';
39 
    box-sizing:border-box;
40 
    border: 0;
41 
    border-top:45px solid #0000;
42 
    border-bottom:135px solid #0000;
43 
    border-right: 78px solid #5DBCF9;
44 
    left:-78;
45 
    top:-35;
46 
  }
47 
  [d]::after {
48 
    left:-65;
49 
    top:-21;
50 
    border-top:35px solid #0000;
51 
    border-bottom:106px solid #0000;
52 
    border-right: 60px solid #191919;
53 
  }
54 
  [r]{
55 
    transform:scaleX(-1);
56 
  }
57 
  [w1],[w2] {
58 
    position: absolute;
59 
    border: 10px solid #191919;
60 
    background: #5DBCF9;
61 
    width: 200px;
62 
    height: 10px;
63 
    translate: 90px 12px;
64 
  }
65 
  [w2] {
66 
    width: 110px;
67 
    translate: 135px 32px;
68 
    border-bottom-width: 100;
69 
  }
70 
</style>
I missed it today due to work, but I finally came around with a solution to this. It was quite tricky, but I got 100% even though it doesn't look like my solution looks like a complete match to me. I used the "three transparent borders make a triangle" trick to get the ships deck.
< Back to Frontend Friday Folks Index