如何在Flutter中实现三角形容器的半绿色着色效果？

根据需求，这里提供几种实用的CSS实现方案，按简便度和实用性排序：

方法1：CSS线性渐变（首选） #

这是最简洁高效的方式，无需额外DOM元素，兼容性覆盖所有现代浏览器及IE10+。

.container {
  width: 300px;
  height: 200px;
  /* 水平左半部分绿色，右半部分白色（可替换为你需要的底色） */
  background: linear-gradient(to right, #2ecc71 50%, #fff 50%);
  /* 垂直方向上半部分绿色的写法 */
  /* background: linear-gradient(to bottom, #2ecc71 50%, #fff 50%); */
}

通过设置渐变颜色的断点为50%，直接实现容器对半染色，还能轻松调整比例（比如改成60%绿色）。

方法2：伪元素覆盖（适合复杂场景） #

如果需要在染色层上方放置内容，或者需要动态调整染色区域，伪元素方案更灵活：

.container {
  width: 300px;
  height: 200px;
  position: relative;
  background-color: #fff;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background-color: #2ecc71;
  z-index: 0;
}

/* 确保容器内的内容显示在染色层上方 */
.container .inner-content {
  position: relative;
  z-index: 1;
  padding: 20px;
}

这种方式可以通过JavaScript动态修改伪元素的width或height值，实现比例的实时调整。

方法3：Grid布局分割（进阶场景） #

如果容器内需要拆分出两个独立的子区域，同时实现半色效果，可以用Grid布局：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 等宽两列 */
  width: 300px;
  height: 200px;
}

.container .left-part {
  background-color: #2ecc71;
}

.container .right-part {
  background-color: #fff;
}

适合需要在左右/上下区域分别放置不同内容的场景，同时天然实现半色效果。

内容的提问来源于stack exchange，提问作者Coder