linear-gradient-non-square-ref.html (586B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>Linear gradients for non-square elements reference</title> 4 <style> 5 .a, 6 .b, 7 .c, 8 .d { 9 width: 200px; 10 height: 100px; 11 } 12 .a { 13 background: linear-gradient(-206.56505118deg, black 50%, lightgray 50%); 14 } 15 .b { 16 background: linear-gradient(206.56505118deg, black 50%, lightgray 50%); 17 } 18 .c { 19 background: linear-gradient(-26.56505118deg, black 50%, lightgray 50%); 20 } 21 .d { 22 background: linear-gradient(26.56505118deg, black 50%, lightgray 50%); 23 } 24 </style> 25 <div class="a"></div> 26 <div class="b"></div> 27 <div class="c"></div> 28 <div class="d"></div>