Question

我有以下用于制作讲话泡泡的CSS。它完美地运作。我的问题是，我想在页面上有不同颜色的气泡。

我将class triangle-border1应用于P标签。当然，内联我可以将int next = 0; for (int i = 0; i < numbers.length; i++) { for (int j = i + 1; j < numbers.length; j++) { if (numbers[i] < numbers [j]) { next = numbers[j]; break; } } System.out.println(numbers[i] + ":" + next); }更改为我选择的任何颜色。但是该类使用了无法在线更改的伪元素。

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

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

由于

    img = cv2.imread(r'D:\Image\tainted.png', 0)

    #Apply morphological closing operation
    #to remove pepper noise
    kernel = np.ones((5,5),np.uint8)
    closing = cv2.morphologyEx(img, cv2.MORPH_CLOSE, kernel)

    ret, bw = cv2.threshold(closing, 127, 255, cv2.THRESH_BINARY)

    #Upscale the image and applying blurring operation
    #to smooth the image
    up = cv2.pyrUp(bw)
    for i in range(20):
        blur = cv2.medianBlur(up, 9)

    #downsample the image
    down = cv2.pyrDown(blur)

    ret, bw = cv2.threshold(down, 127, 255, cv2.THRESH_BINARY)

Answer 1

我能看到的最好的方法是使用元素上的不同类来获得边框颜色，如

.triangle-border {
  position: relative;
  padding: 10px;
  margin: 1em 0 1em;
  color: #333;
  background: #fff;
  border-radius: 10px;
}

.triangle-border: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;
}

.triangle-border: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;
}

.triangle-border.color1 {
  border: 5px solid #F7827B;
}

.triangle-border.color2 {
  border: 5px solid red;
}

.triangle-border.color3 {
  border: 5px solid blue;
}

.triangle-border.color4 {
  border: 5px solid black;
}

.triangle-border.color1:before {
  border-top-color: #F7827B;
}

.triangle-border.color2:before {
  border-top-color: red;
}

.triangle-border.color3:before {
  border-top-color: blue;
}

.triangle-border.color4:before {
  border-top-color: black;
}

<div class="triangle-border color1"></div>
<div class="triangle-border color2"></div>
<div class="triangle-border color3"></div>
<div class="triangle-border color4"></div>

Answer 2

使用这样的CSS变量：

.triangle-border {
  position: relative;
  padding: 10px;
  margin: 1em 0 1em;
  color: #333;
  background: #fff;
  border-radius: 10px;
  border: 5px solid var(--c,#fff);
}

.triangle-border:before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 40px;
  border-width: 20px 20px 0;
  border-style: solid;
  color:transparent;
  border-bottom: 0px white solid;
  border-top-color: var(--c,#fff);
}

.triangle-border:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 47px;
  border-width: 13px 13px 0;
  border-style: solid;
  color:transparent;
  border-bottom: 0px white solid;
  border-top-color:#fff;
}

<div class="triangle-border" style="--c:pink"></div>
<div class="triangle-border" style="--c:blue"></div>
<div class="triangle-border" style="--c:red"></div>
<div class="triangle-border" style="--c:black"></div>

Answer 3

您需要将您的CSS拆分为2个不同的类。一个用于形状，一个用于颜色：

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

然后在现有的css类下添加另一个css类：

.triangle-color1 {
  border:5px solid #F7827B;
}
.triangle-color1:before {
  border-top-color: #F7827B;
}
.triangle-color1:after {
  border-top-color: #F7827B;
}

在第二个类中，您可以从现有的CSS类中覆盖所需的任何属性。

CSS - 避免重复

3 个答案: