Bevel Corner Colour to same as box? - html

Question

Can anyone solve this issue?
I've created some bevelled edge corners to a box using a before and after tag. This works great if I style the colour of the box and the before and after with the specified colour.
However I need to be able to swap colours easily using colour classes in the html. But I can't get the colour classes to change the before and after state.
Its tricky to explain but please see the codepen mock up and you will easily see the problem.
I basically want to change the whole thing to either red,green,blue etc using one class and not have to change the before and after colours as well.
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;
}
I'd be grateful if anyone can take a look at this and see if there is a solution.
Thanks
Anthony

Answer 1

Consider this option, using three elements (top, middle,bottom) and playing with borders you can have a quite good result avoiding pseudo-elements. Then you just set a border-color in each color-class. One caveat is that you'll have to absolute position the content inside the middle element. 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

Please see the CSS solution below. I added before and after selectors to the bc-green colour class;
.bc-green::after {
border-top-color: green; !important
}
.bc-green::before {
border-bottom-color: green; !important
}
.bc-green{
background: green;
}
See the working solution over at Codepen > http://codepen.io/jabuttercup123/pen/Pppdab