Question

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

我现在想做的是在所有单元中的任何地方都具有相同的形状，但是可以随意更改颜色。我可以做的是使两个div具有相同的样式定义，但仅在涉及颜色的地方使用单独的行。但是要点是，我有任意数量的不同颜色（实际上取决于矩阵），因此这种方法不是可取的。

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

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

等等各种颜色？我在css中用google搜索了变量的用法，发现了一些页面，但是在我看来它们是相当静态的，即在顶部或通过js定义它们，但是它们仍然被硬编码为样式定义，因此它们没有确实从div变为div。

谢谢您的建议！

conni

Answer 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和其他许多样式的方式，因为您可以查看类并确切地了解它应该做什么。在上面的示例中，您甚至不需要查看执行的代码就知道应该看到一个红色三角形，一个绿色三角形和一个浅红色三角形。

Answer 2

使用4个CSS类-三角形1个，每种颜色3个。
由于此三角形颜色来自其inputs = browser.find_elements_by_name("username")，因此通过制作如下CSS来应用该颜色：border-bottom

.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;
}

Answer 3

谢谢您的回答。因此这是不可能的，正如我最初希望的那样（如果我有x种颜色，我想避免制作x个子类），但是显然没有办法解决。谢谢！康妮

相同样式但颜色可变的Div

3 个答案: