我需要帮助在HTML或CSS编码中重新创建冰岛国旗

我需要帮助重新创建冰岛国旗所有的HTML和CSS代码，所以没有或任何东西。非常感谢你。

---

可能不太漂亮，但给你

HTML:

---

多重渐变可以轻松做到这一点：

.国旗{ 宽度：170px； 高度：145px； 背景： 线性梯度蓝色，蓝色0 0/50px 50px， 线性梯度蓝色，蓝色0 100%/50px 50px， 线性梯度蓝色，蓝色100%0/75px 50px， 线性梯度蓝色，蓝色100%100%/75px 50px， 线性梯度，红色60px 0/25px 100%， 线性梯度，红色0 60px/100%25px； 背景重复：无重复； }

---

欢迎来到StackOverflow，请阅读关于如何提问的文章，并描述您尝试过的内容。特别是当将代码量与另一个答案进行比较时，令人印象深刻

<div class="parent">
  <div class="div1"> </div>
  <div class="div2"> </div>
  <div class="div3"> </div>
  <div class="div4"> </div>
  <div class="div5"> </div>
  <div class="div6"> </div>
  <div class="div7"> </div>
  <div class="div8"> </div>
  <div class="div9"> </div>
</div>

.parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  width: 172px;
  height: 126px;
}

.div1 { 
  grid-area: 1 / 1 / 2 / 2;
  background: blue;
  height: 50px;
  width: 50px;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
}
.div2 { 
  grid-area: 1 / 2 / 2 / 3; 
  background: red;
  width: 20px;
  height: 50px;
  border-bottom: 3px solid red;
}
.div3 { 
  grid-area: 1 / 3 / 2 / 4; 
  background: blue;
  height: 50px;
  width: 100px;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
}
.div4 { 
  grid-area: 2 / 1 / 3 / 2; 
  background: red;
  height: 20px;
}
.div5 { 
  grid-area: 2 / 2 / 3 / 3; 
  background: red;
  height: 20px;
}
.div6 { 
  grid-area: 2 / 3 / 3 / 4; 
  background: red;
  height: 20px;
}
.div7 { 
  grid-area: 3 / 1 / 4 / 2; 
  background: blue;
  height: 50px;
  width: 50px;
  border-right: 3px solid white;
  border-top: 3px solid white;
}
.div8 { 
  grid-area: 3 / 2 / 4 / 3; 
  background: red;
  width: 20px;
  height: 50px;
  border-top: 3px solid red;
}
.div9 { 
  grid-area: 3 / 3 / 4 / 4; 
  background: blue;
  height: 50px;
  width: 100px;
  border-left: 3px solid white;
  border-top: 3px solid white;
}