目标：

更改由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>

Answer 1

如果您的意思是更改形状的颜色是由::after伪元素创建的;

由于您已在每个.bub元素上设置了border-color属性，因此您只需对inherit伪元素使用:after值，如下所示：

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

<强> WORKING DEMO

来自 MDN ：

继承CSS值会导致指定它的元素从其父元素中获取属性的计算值。它是允许每个CSS属性。

更改创建的CSS形状的颜色：在伪元素作为其父元素之后？

目标：

1 个答案: