Question

任何人都可以解决这个问题吗？

我使用before和after标签为一个盒子创建了一些斜角边角。如果我使用指定颜色设置框的颜色以及之前和之后的颜色，这样做效果很好。

但是我需要能够使用html中的颜色类轻松交换颜色。但我无法通过颜色类来改变前后状态。

解释起来很棘手，但请看看codepen模拟，你会很容易看到问题。

我基本上想要使用一个类将整个事物更改为红色，绿色，蓝色等，而不必更改前后颜色。

https://codepen.io/Hornet_ant/pen/zZZWMp

HTML：

  <div class="bc-box bc-red">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium 
  </p>
  </div>

CSS

.bc-box {
position: relative;
margin: 40px 0 40px 0;
padding: 0 20px;
}

.bc-box:before, .bc-box:after {
box-sizing: border-box;
border-style: solid;
border-color: transparent;
border-width: 20px;
content: "";
display: block;
left: 0;
position: absolute;
width: 100%;
}

.bc-box:before {
border-top-width: 0;
top: -20px;
border-bottom-color: #f5862d;
}
.bc-box:after {
border-bottom-width: 0;
bottom: -20px;
border-top-color: #f5862d;
}

/* <---COLOURS----> */

.bc-green{
    background-color: #30a79c;
}

.bc-red {
    background-color: #dd004c;
}

.bc-blue{
   background-color:#5276b6;
}

如果有人能看一眼，看看是否有解决方案，我将不胜感激。

由于安东尼

Answer 1

考虑这个选项，使用三个元素（顶部，中间，底部）并使用边框播放，可以获得非常好的结果，避免使用伪元素。然后，您只需在每个颜色类中设置border-color。需要注意的是，您必须将内容绝对定位在中间元素内。 DEMO

.text {
  position: absolute;
  top: -65px;
}

.trapezoid {
  height: 0;
  width: 500px;
  border-style: solid;
}

.trapezoid:nth-child(1) {
  border-bottom-width: 50px;
  border-top-width: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.middle {
  height: 0;
  width: 500px;
  border-style: solid;
  border-width: 50px;
  position: relative;
}

.trapezoid:nth-child(3) {
  border-top-width: 50px;
  border-bottom-width: 0px;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.bc-red div {
  border-color: red;
}

.bc-green div {
  border-color: green;
}

<div class="bc-green"><!--Just change this class and all colors change-->
  <div class="trapezoid"></div>
  <div class="middle">
    <div class="text">
        <h3>Heading three</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pretium nisi vitae mauris egestas aliquam. Sed sed nulla ipsum. Donec id eleifend mauris. Morbi ultricies, est sit amet porttitor condimentum, sem ligula</p>
    </div>
  </div>
  <div class="trapezoid"></div>
</div>

Answer 2

请参阅下面的CSS解决方案。我在选择器之前和之后添加了bc-green颜色类;

 .bc-green::after {
  border-top-color: green; !important
}

.bc-green::before {
  border-bottom-color: green; !important
}
.bc-green{
  background: green;
}

在Codepen上查看工作解决方案＆gt; http://codepen.io/jabuttercup123/pen/Pppdab

斜角颜色与盒子相同？

2 个答案: