ベベルコーナーの色と同じですか？

Question

誰でもこの問題を解決できますか？

私は前と後のタグを使用してボックスにいくつかのベベル縁のコーナーを作成しました。これは、ボックスの色や前後の色を指定した色でスタイルすると効果的です。

は、しかし、私は、HTMLの色のクラスを使用して簡単に色を交換できるようにする必要があります。しかし、カラークラスを取得して前後の状態を変更することはできません。

そのトリッキー

を説明するが、参照してください。codepenは、モックアップ、あなたは簡単に問題が表示されます。

私は基本的に1つのクラスを使用して、赤、緑、青のいずれかなどに全部を変更し、同様に前と後の色を変更する必要はありませんしたいと思います。

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

あなたは擬似要素を避けかなり良い結果を持つことができる3つの要素（上、中、下）との境界線で遊んを使用して、このオプションを考えてみましょう。次に、各カラークラスにborder-colorを設定します。 1つの注意点は、コンテンツを中間要素の中に絶対配置する必要があることです。 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で実用的なソリューションを超える参照してください>http://codepen.io/jabuttercup123/pen/Pppdab