< Back to Frontend Friday Folks Index

Not Simply Square

Highlighted solution (381 characters)
1 
<div></div>
2 
<div class="b"></div>
3 
<style>
4 
  body {
5 
    background: #293462;
6 
    margin: 0;
7 
  }
8 
  div {
9 
    position: absolute;
10 
    width: 300px;
11 
    height: 200px;
12 
    background:
13 
      linear-gradient(90deg, #FFF1C1 200px, transparent 0),
14 
      linear-gradient(#FE5F55 150px, #A64942 0)
15 
    ;
16 
  }
17 
  .b {
18 
    transform: translate(-50px, 50px) scaleX(-1) rotate(90deg);
19 
  }
20 
</style>
Whenever doing a transform, remember that the order matters...!
Highlighted solution (322 characters)
1 
<style>
2 
  body {
3 
    background:
4 
      linear-gradient(#FFF1C1, #FFF1C1) no-repeat,
5 
      linear-gradient(90deg, #FE5F55 150px, #A64942 0 50%, transparent 0 300px, #293462 0),
6 
      linear-gradient(#FE5F55 150px, #A64942 0 200px, transparent 0),
7 
      #293462
8 
    ;
9 
    background-size: 50% 50vw, 100%, 100%;
10 
  }
11 
</style>
12
Ok, one more solution with no elements set up.
< Back to Frontend Friday Folks Index