Html 如何将不同元素的背景色和边框色属性分组到同一个css类中？

例如，我有一个橙色标签，左右两侧都有三角形：

.tdLeft{
右边框：0.5em实心橙色；
}
.tdMiddle{
背景颜色：橙色；
字体大小：30px；
}
.tdRight{
左边框：0.5em实心橙色；
}
.tdSide{
边框顶部：0.5em实心透明；
边框底部：0.5em实心透明；
}

测试

您只能使用更改值一次：

：根目录{
--颜色：红色；/*调整*/
}
.tdLeft{
右边框：0.5em实心变量（--颜色）；
}
.tdMiddle{
背景色：var（--color）；
字体大小：30px；
}
.tdRight{
左边框：0.5em实心变量（--颜色）；
}
.tdSide{
边框顶部：0.5em实心透明；
边框底部：0.5em实心透明；
}

测试

您可以只使用一个元素，而伪元素

：：在
之前和
：：在
之后

我还为颜色使用了CSS变量：


表格{
--颜色：橙色；
边缘：0.5 em；
}
.myTD{
位置：相对位置；
边框：0实心透明；
边界宽度：0.5em 0；
背景色：var（--color）；
字体大小：30px；
}
.myTD：：之前，
.myTD：：之后{
内容：''；
位置：绝对位置；
顶部：-0.5em；
底部：-0.5em；
边框：1米实心透明；
边框颜色：透明var（--颜色）；
}
.myTD：：之前{
左：-1米；
左边框：0；
}
.myTD：：之后{
右：-1em；
右边界：0；
}

测试
您也可以使用css变量嵌套，如下所示。这是@VXp建议的修改答案：

:root{
    --color: orange;
    --border: 0.5em solid var(--color);
    --transparent: transparent;
    --solid: 0.5em solid var(--transparent);
}

.tdLeft{
  border-right:var(--border);
}
.tdMiddle{
  background-color:var(--color);
  font-size:30px;
}
.tdRight{
  border-left:var(-border);
}
.tdSide{
  border-top:var(--border) var(--transparent);
  border-bottom:var(--solid);
}

只要你滥用表格来进行布局，你就不应该再为这些CSS问题操心了……不过，只要你至少有两个嵌套元素，
currentColor
“拯救”将是座右铭（和研究关键字）