同一div中的响应式多个三角形CSS答案

【问题标题】：Responsive multiple triangle CSS in same div同一div中的响应式多个三角形CSS
【发布时间】：2019-12-24 19:07:57
【问题描述】：

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

这个 CSS 可以吗？响应式设计

【问题讨论】：

标签： html css

【解决方案1】：

在此示例中，您可以使用 background color 更改边框颜色

.test {
  width: 25%;
  height: 35vh;
  background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHBvbHlnb24gcG9pbnRzPSIwLDAgNjIuNTg1NzgsMCAwLDYyLjU4NTc4IiBmaWxsPSIjNDRGNjkwIi8+PHBvbHlnb24gcG9pbnRzPSI2NCwxLjQxNDIxIDY0LDY0IDEuNDE0MjEsNjQiIGZpbGw9IiM0N0NGRjMiLz48L3N2Zz4=");
  background-size: 100% 100%;
  resize: both;
}
/*
The sample SVG is now:
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 64 64">
<polygon points="0,0 62.58578,0 0,62.58578" fill="#44F690"/>
<polygon points="64,1.41421 64,64 1.41421,64" fill="#47CFF3"/>
</svg>
*/

&lt;div class="test"&gt;&lt;/div&gt;

您会看到 SVG 代码中没有线元素。

【讨论】：

【解决方案2】：

你可以使用线性渐变：

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

&lt;div class="test"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

假设您当前的三角形是用经典的边框技巧（零尺寸元素，不同颜色的半尺寸边框）制作的，您不能只是让它们响应 - 百分比单位 are not supported边框大小。

但是，您可以使用 SVG 背景来达到同样的效果：

.test {
  width: 25%;
  height: 35vh;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiIHZpZXdCb3g9IjAgMCA2NCA2NCI+Cjxwb2x5Z29uIHBvaW50cz0iMCwwIDY0LDAgMCw2NCIgZmlsbD0iIzQ0RjY5MCIvPgo8cG9seWdvbiBwb2ludHM9IjY0LDAgNjQsNjQgMCw2NCIgZmlsbD0iIzQ3Q0ZGMyIvPgo8bGluZSB4MT0iNjQiIHkxPSIwIiB4Mj0iMCIgeTI9IjY0IiBzdHlsZT0ic3Ryb2tlOndoaXRlO3N0cm9rZS13aWR0aDoyIi8+Cjwvc3ZnPg==);
  background-size: 100% 100%;
  resize: both;
}
/*
Sample SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 64 64">
<polygon points="0,0 64,0 0,64" fill="#44F690"/>
<polygon points="64,0 64,64 0,64" fill="#47CFF3"/>
<line x1="64" y1="0" x2="0" y2="64" style="stroke:white;stroke-width:2"/>
</svg>
</svg>
Note that you need to strip width/height properties and make sure that it has a viewbox, else it'll center instead of stretching
(see https://stackoverflow.com/a/56459700/5578773)
*/

&lt;div class="test"&gt;&lt;/div&gt;

（也许将分割线作为单独的背景/元素覆盖，以便在过度拉伸的情况下看起来不会异常）

【讨论】：