更改由 :after 伪元素作为其父元素创建的 CSS 形状的颜色？答案

【问题标题】：Change color of CSS shape created by :after pseudo-element as its parent?更改由 :after 伪元素作为其父元素创建的 CSS 形状的颜色？
【发布时间】：2014-03-21 05:57:05
【问题描述】：

我有一些显示“文本消息”气泡的 HTML 和 CSS。为了创建气泡，使用了 CSS 类 .bub。然后，使用.bub:after 构建三角形。

我很难根据其父颜色更改 :after 伪元素创建的 CSS 形状的颜色。

目标：

改变由div:after伪元素创建的三角形的颜色。颜色会有很多，所以为每种颜色写不同的类会太麻烦。

这里是简化的 CSS 和 HTML：

<!DOCTYPE html>
<html lang="en">
  <div id="container">
  <head>
  <style> 

.bub {
  width: 275px;
  display: table-cell;
  position:relative;
  padding:10px;
  margin:1em 0 3em;
  color:#fff;
  background:#075698;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  border-radius:10px;
}

.bub:after {
  content:"";
  position:absolute;
  bottom:-20px; 
  left:50px; /* controls horizontal position */
  border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */
  border-style:solid;
  /* reduce the damage in FF3.0 */
  display:block;
  width:0;
}

.bub.left {
  left: -100px;
}

.bub.left:after {
  top:16px;
  left:-40px; /* value = - border-left-width - border-right-width */
  bottom:auto;
  border-width:10px 40px 0 0; /* vary these values to change the angle of the vertex */
  border-color: transparent #333;
}

body {
  padding:0;
  margin:0;
  font:1em/1.4 Cambria, Georgia, sans-serif;
  color:#333;
  background:#fff;
}

#container {
  width:275px;
  padding:0 0 50px;
  margin:0 auto;
}

.blue {
  background: blue;
  border-color: blue;
}

.green {
  background: green;
  border-color: green;
}

.red {
  background: red;
  border-color: red;
}
    
  </style>
  </head>
  <body>
    <div class="content">
      <br><br>
      <div class="bub left blue">Test 1</div>
      <br>
      <div class="bub left green">Test 2</div>
      <br>
      <div class="bub left red">Test 3</div>
    </div>
  </div>
  </body>
</html>

【问题讨论】：

只需使用color 属性。但如果他们没有任何内容 (content:'')，您将看不到任何内容。

标签： css css-shapes

【解决方案1】：

如果你的意思是改变形状的颜色是由::after伪元素创建的；

由于您已在每个 .bub 元素上设置了 border-color 属性，您可以简单地将 inherit 值用于 :after 伪元素，如下所示：

.bub.left:after {
  border-color: transparent inherit;
}

WORKING DEMO.

来自MDN：

inherit CSS-value 导致它被指定的元素从其父元素中获取属性的计算值。这是允许在每个 CSS 属性上使用。

【讨论】：

超级棒的先生！谢谢你。我申请了项目，效果很好。
@user3425949 别提了。我很高兴能帮上忙:)