html - 同一div中的响应式多个三角形CSS

Question

我有一张桌子，上面有许多这样的三角形，每个 td 都有动态背景颜色。我们需要让三角框响应

有可能制作这个 CSS吗？响应式设计

标签： htmlcss

Answer 1

您可以使用线性渐变：

.test {
  width:50%; 
  height:300px;
  background-image: linear-gradient(to right bottom, #44F690 0%, #44F690 49.8%, #ffffff 50%, #47CFF3 50.2%, #47CFF3 100%);
}

<div class="test"></div>