Финский флаг в HTML

html, body { 
  height: 100%; 
  margin: 0; 
} 
 
html { 
  background: linear-gradient(135deg, antiquewhite, silver); 
  padding: 1em 32%; 
  box-sizing: border-box; 
} 
 
div:before { 
  content: ""; 
  display: block; 
  padding-top: 61.111%; 
} 
 
div { 
  background: 
    linear-gradient(to right, transparent 27.778%, #005498 27.778%, #005498 44.444%, transparent 44.444%),  
    linear-gradient(to bottom, transparent 36.364%, #005498 36.364%, #005498 63.636%, transparent 63.636%) 
    white 
}

<div></div>

table { 
  border-spacing: 0px; 
  height: 110px; 
  width: 180px; 
} 
 
td.lt { 
  height: 40px; 
  width: 50px; 
} 
 
td.ct { 
  background-color: #003580; 
  width: 30px; 
} 
 
td.rt { 
  width: 100px; 
} 
 
td.cc { 
  background-color: #003580; 
}

<table> 
  <tr> 
    <td class="lt"> 
    </td> 
    <td class="ct"> 
    </td> 
    <td class="rt"> 
    </td> 
  </tr> 
  <tr> 
    <td colspan="3" class="cc"> 
    </td> 
  </tr> 
  <tr> 
    <td class="lt"> 
    </td> 
    <td class="ct"> 
    </td> 
    <td class="rt"> 
    </td> 
  </tr> 
</table>

* { 
  padding: 0; 
  margin: 0; 
  box-sizing: border-box; 
} 
 
.flag-finland { 
  width: 300px; 
  height: 200px; 
  background: #fff; 
  position: relative; 
  border: 1px solid #ccc; 
} 
 
.flag-finland:before, 
.flag-finland:after { 
  content: ''; 
  position: absolute; 
  background: #003584; 
} 
 
.flag-finland:before { 
  top: 0; 
  left: 100px; 
  width: 40px; 
  height: 100%; 
} 
 
.flag-finland:after { 
  top: 50%; 
  left: 0; 
  width: 100%; 
  height: 40px; 
  margin-top: -20px; 
}

<div class="flag-finland"></div>

/* 
Из вики узнал о размерах флага и т.п. 
https://ru.wikipedia.org/wiki/Флаг_Финляндии 
*/ 
.flag { 
  display: block; 
  width: 180px; 
  height: 110px; 
  background: #003580; 
  position: relative; 
} 
 
.flag::before, .flag::after { 
  content: ''; 
  display: block; 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  height: 100%; 
  box-sizing: border-box; 
  background: transparent; 
  border: 0 solid #fff; 
} 
 
.flag::before { 
  width: calc((100%/18)*5); 
  border-top-width: calc((110px/11)*4); 
  border-bottom-width: calc((110px/11)*4); 
  left: 0; 
} 
 
.flag::after { 
  width: calc((100%/18)*10); 
  border-top-width: calc((110px/11)*4); 
  border-bottom-width: calc((110px/11)*4); 
  right: 0; 
}

<div class="flag"></div>

<svg xmlns="http://www.w3.org/2000/svg" width="1800" height="1100"> 
<rect width="1800" height="1100" fill="#fff"/> 
<rect width="1800" height="300" y="400" fill="#003580"/> 
<rect width="300" height="1100" x="500" fill="#003580"/> 
</svg>