样式相同但颜色可变的div答案

【问题标题】：Div of same style but variable color样式相同但颜色可变的div
【发布时间】：2019-03-31 09:01:48
【问题描述】：

我正在为私人目的编写一个 HTML 页面，该页面应该以图形方式显示矩阵的内容。本质上，我有一个由 div 组成的表格，每个单元格都有一个形状。例如，我从https://www.w3schools.com/howto/howto_css_shapes.asp 获取了三角形。正如您在他们的示例中看到的，div 的背景颜色在 div 的样式定义中编码。

我现在想做的是在所有单元格中到处都有相同的形状，但是任意改变颜色。我可以做的是制作两个具有相同样式定义的 div，然后只在涉及颜色的地方分开行。但关键是，我有任意数量的不同颜色（它实际上取决于矩阵），因此，这种方法不是可取的。

相反，这是我的问题：是否可以在调用 div 时更改颜色？ IE。我现在想在调用 div 时更改颜色，而不是让单个类具有相同的颜色或同一类的多个副本具有不同的颜色。有没有可能做这样的事情：

<div class="triangle(red)"></div>
<div class="triangle(green)"></div>
<div class="triangle(light-red)"></div>

等等各种颜色？我在 css 中搜索了变量用法并找到了一些页面，但在我看来它们是相当静态的，即一个在顶部或通过 js 定义它们，但它们仍然被硬编码到样式定义中，所以它们没有真的从 div 变成了 div。

感谢您的建议！

康尼

【问题讨论】：

好吧，如果我理解正确，您可以创建颜色类（例如.red），它们所做的只是改变颜色。然后，在 div 声明中，您将这样写：class="triangle red。
为每种颜色创建一个类。 .green{ background: green} .red { background: red} 。然后像这样添加到您的类属性：<div class="triangle green"></div><div class="triangle red" ></div>
考虑 CSS 变量（例如：stackoverflow.com/a/55091778/8620333）
不，您不能在没有脚本的情况下动态执行此操作，或者设置静态类/变量。 CSS 不是一种编程语言，因此没有可以运行的方法（目前除了 calc() 和 attr()）

标签： css

【解决方案1】：

如果“在调用 div 时更改颜色”是指在运行时更改三角形的颜色，那么不会。 HTML 和 CSS 不是编程语言。但是，您可以创建只更改颜色的类以使您的代码具有语义并减少回收代码的数量。

有些形状允许您使用background: color 属性进行着色，但三角形通过border 属性着色。对于一个直立的三角形，你可以这样做：

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

.red {
  border-bottom: 50px solid red;
}

.green {
  border-bottom: 50px solid green;
}

.light-red {
  border-bottom: 50px solid #f78889;
}

<div class="triangle red"></div>
<div class="triangle green"></div>
<div class="triangle light-red"></div>

请注意，这实际上是非常流行的可读性。这就是 bootstrap、semantic-ui 和许多其他样式的方式，因为您可以查看这些类并确切了解它应该做什么。在上面的示例中，您甚至不需要查看执行的代码就知道您应该期待一个红色三角形、一个绿色三角形和一个浅红色三角形。

【讨论】：

【解决方案2】：

使用 4 个 CSS 类 - 1 个用于三角形，3 个用于每种颜色。
由于这个三角形颜色来自它的border-bottom，所以通过这样的 CSS 应用颜色：.triangle.color-name {border-bottom-color: the-color;}

.triangle {
  width: 0;
  height: 0;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
  border-bottom: 50px solid #555;
}

.triangle.red {
  border-bottom-color: red;
}

.triangle.green {
  border-bottom-color: green;
}

.triangle.light-red {
  border-bottom-color: #f44;
}

<div class="triangle red">&nbsp;</div>
<div class="triangle green">&nbsp;</div>
<div class="triangle light-red">&nbsp;</div>

【讨论】：

【解决方案3】：

感谢您的回答。所以这不可能像我最初希望的那样（如果我有 x 颜色，我想避免创建 x 子类），但显然没有办法解决这个问题。谢谢！康尼

【讨论】：