时间戳

首页 > 解决方案 > 如何仅使用 HTML 和 CSS 创建爱尔兰国旗？

html - 如何仅使用 HTML 和 CSS 创建爱尔兰国旗？

问题描述

我使用 HTML 和 CSS（除了Ashok Chakra）创建了印度国旗。现在我想创建爱尔兰国旗，它只是垂直三色，而不是像印度国旗那样的水平三色。那么我该如何实现呢？我创建了以下代码。

body {
  background-color: yellow;
  margin-left: 40%;
  margin-right: 40%;
}

.top {
  background-color: orange;
  width: 320px;
  height: 80px;
}

.mid {
  background-color: white;
  width: 320px;
  height: 80px;
}

.botm {
  background-color: green;
  width: 320px;
  height: 80px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="india.css">
  <title>Flag</title>
</head>

<body>
  <div class="top"></div>
  <div class="mid"></div>
  <div class="botm"></div>
</body>

</html>

标签： htmlcss

解决方案

如下例所示，带有一个linear-gradient或一个双内嵌的单个 divbox-shadow就足够了

线性梯度

.irishflag { 
        background: linear-gradient(to right, #169B62 33.33%, #fff 0, #fff 66.66%, #FF883E 0);
        width: 270px;
        height: 135px;
    }
<div class="irishflag"></div>

盒子阴影

.irishflag { 
    box-shadow: 90px 0 #169B62 inset, -90px 0 #FF883E inset;
    width: 270px;
    height: 135px;
}
<div class="irishflag"></div>

颜色和比例取自维基百科

推荐阅读