Css 避免重复

我有下面的CSS，它使一个语音泡泡。 它工作得很好。 但我的问题是，我希望页面上有不同颜色的语音泡泡

我将类triangle-border1应用于p标记。当然，内联我只需更改

边框：5px solid#F7827B到我选择的任何颜色。但是该类使用了不能内联更改的伪元素

因此，我有7个相同CSS类的副本，编号为1-7，唯一的区别是颜色！这似乎是错误的做法

有没有人知道如何在不重复CSS的情况下实现这一点

谢谢

.triangle-border1 {
  position:relative;
  padding:10px;
  margin:1em 0 1em;
  border:5px solid #F7827B;
  color:#333;
  background:#fff;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}
.triangle-border1:before {
  content:"";
  position:absolute;
  bottom:-20px; 
  left:40px; 
  border-width:20px 20px 0;
  border-style:solid;
  border-bottom:0px white solid;
  border-bottom-color:transparent;
  border-left-color:transparent;
  border-right-color:transparent;
  border-top-color:#F7827B;
}
.triangle-border1:after {
  content:"";
  position:absolute;
  bottom:-10px; 
  left:47px; 
  border-width:13px 13px 0;
  border-style:solid;
  border-bottom:0px white solid;
  border-bottom-color:transparent;
  border-left-color:transparent;
  border-right-color:transparent;
  border-top-color:#FFF;
}

正如我所看到的，最好的方法是在元素上使用不同的类，就像边框颜色一样


。三角形边框{
位置：相对位置；
填充：10px；
边距：1米0 1米；
颜色：#333；
背景：#fff；
边界半径：10px；
}
.三角形边框：之前{
内容：“；
位置：绝对位置；
底部：-20px；
左：40px；
边框宽度：20px 20px 0；
边框样式：实心；
边框底部：0px白色固体；
边框底色：透明；
左边框颜色：透明；
右边框颜色：透明；
}
.三角形边框：后{
内容：“；
位置：绝对位置；
底部：-10px；
左：47px；
边框宽度：13px 13px 0；
边框样式：实心；
边框底部：0px白色固体；
边框底色：透明；
左边框颜色：透明；
右边框颜色：透明；
边框顶部颜色：#FFF；
}
.triangle-border.color1{
边框：5px实心#F7827B；
}
.triangle-border.color2{
边框：5px纯红；
}
.triangle-border.color3{
边框：5px纯蓝色；
}
.三角形边框{
边框：5px纯黑；
}
.三角形边框.颜色1:之前{
边框顶部颜色：#F7827B；
}
.三角形边框.颜色2:之前{
边框顶部颜色：红色；
}
.三角形边框.颜色3:之前{
边框顶部颜色：蓝色；
}
.三角形边框.颜色4:之前{
边框顶部颜色：黑色；
}
正如我所看到的，最好的方法是在元素上使用不同的类，就像边框颜色一样


。三角形边框{
位置：相对位置；
填充：10px；
边距：1米0 1米；
颜色：#333；
背景：#fff；
边界半径：10px；
}
.三角形边框：之前{
内容：“；
位置：绝对位置；
底部：-20px；
左：40px；
边框宽度：20px 20px 0；
边框样式：实心；
边框底部：0px白色固体；
边框底色：透明；
左边框颜色：透明；
右边框颜色：透明；
}
.三角形边框：后{
内容：“；
位置：绝对位置；
底部：-10px；
左：47px；
边框宽度：13px 13px 0；
边框样式：实心；
边框底部：0px白色固体；
边框底色：透明；
左边框颜色：透明；
右边框颜色：透明；
边框顶部颜色：#FFF；
}
.triangle-border.color1{
边框：5px实心#F7827B；
}
.triangle-border.color2{
边框：5px纯红；
}
.triangle-border.color3{
边框：5px纯蓝色；
}
.三角形边框{
边框：5px纯黑；
}
.三角形边框.颜色1:之前{
边框顶部颜色：#F7827B；
}
.三角形边框.颜色2:之前{
边框顶部颜色：红色；
}
.三角形边框.颜色3:之前{
边框顶部颜色：蓝色；
}
.三角形边框.颜色4:之前{
边框顶部颜色：黑色；
}
您需要将css拆分为两个不同的类。一个用于形状，一个用于颜色：

<div class="triangle-border1 triangle-color1"></div>

在第二个类中，您可以覆盖现有CSS类中的任何属性。
您需要将CSS拆分为两个不同的类。一个用于形状，一个用于颜色：

<div class="triangle-border1 triangle-color1"></div>

在第二个类中，您可以覆盖现有CSS类中所需的任何属性。
使用CSS变量如下：


。三角形边框{
位置：相对位置；
填充：10px；
边距：1米0 1米；
颜色：#333；
背景：#fff；
边界半径：10px；
边框：5px实心变量（-c，#fff）；
}
.三角形边框：之前{
内容：“；
位置：绝对位置；
底部：-20px；
左：40px；
边框宽度：20px 20px 0；
边框样式：实心；
颜色：透明；
边框底部：0px白色固体；
边框顶部颜色：var（-c，#fff）；
}
.三角形边框：后{
内容：“；
位置：绝对位置；
底部：-10px；
左：47px；
边框宽度：13px 13px 0；
边框样式：实心；
颜色：透明；
边框底部：0px白色固体；
边框顶部颜色：#fff；
}
像这样使用CSS变量：


。三角形边框{
位置：相对位置；
填充：10px；
边距：1米0 1米；
颜色：#333；
背景：#fff；
边界半径：10px；
边框：5px实心变量（-c，#fff）；
}
.三角形边框：之前{
内容：“；
位置：绝对位置；
底部：-20px；
左：40px；
边框宽度：20px 20px 0；
边框样式：实心；
颜色：透明；
边框底部：0px白色固体；
边框顶部颜色：var（-c，#fff）；
}
.三角形边框：后{
内容：“；
位置：绝对位置；
底部：-10px；
左：47px；
边框宽度：13px 13px 0；
边框样式：实心；
颜色：透明；
边框底部：0px白色固体；
边框顶部颜色：#fff；
}

这绝对是我想要的！我一直在寻找减少重复代码行的方法，这太棒了！我不知道CSS变量，但我现在将广泛使用它们！非常感谢。@Jack和CSS变量的神奇之处在于，您可以在pseudo元素上放置属性；）不幸的是，WKHTMLTOPDF不支持CSS变量，所以对于这个特定的项目，我不得不列出所有CSS。。。但肯定是用这个来做其他事情。这绝对是我要找的地方！我一直在寻找减少重复代码行的方法，这太棒了！我不知道CSS变量，但我现在将广泛使用它们！非常感谢。@Jack和CSS变量的神奇之处在于，您可以在pseudo元素上放置属性；）遗憾的是，CSS变量不是supper