CSSの背景色で問題::

Question

後、私はチャットバブルを作るために、次のHTML/CSSコードを使用します。

body {background-color: red} 
 

 
.message-sent { 
 
    position:relative; 
 
    padding:10px 20px; 
 
    color:white; 
 
    background:#0B93F6; 
 
    border-radius:25px; 
 
    float: right; 
 
    margin-bottom: 5px; 
 
    margin-right: 30px; 
 
} 
 

 
.message-sent-last::before { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    bottom:-2px; 
 
    right:-7px; 
 
    height:20px; 
 
    border-right:20px solid #0B93F6; 
 
    border-bottom-left-radius: 16px 14px; 
 
    -webkit-transform:translate(0, -2px); 
 
} 
 

 
.message-sent-last::after { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:1; 
 
    bottom:-2px; 
 
    right:-56px; 
 
    width:26px; 
 
    height:20px; 
 
    border-bottom-left-radius: 10px; 
 
    -webkit-transform:translate(-30px, -2px); 
 
    background: red; 
 
}

<div class="message-sent message-sent-last"> 
 
    Hey there! What's up? 
 
</div>

しかし、問題は、CSSの最後の行にあります背景色を繰り返さなければならない場合は、バブルが壊れます。 、これをチェックしてください：

body {background-color: red} 
 

 
.message-sent { 
 
    position:relative; 
 
    padding:10px 20px; 
 
    color:white; 
 
    background:#0B93F6; 
 
    border-radius:25px; 
 
    float: right; 
 
    margin-bottom: 5px; 
 
    margin-right: 30px; 
 
} 
 

 
.message-sent-last::before { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:-1; 
 
    bottom:-2px; 
 
    right:-7px; 
 
    height:20px; 
 
    border-right:20px solid #0B93F6; 
 
    border-bottom-left-radius: 16px 14px; 
 
    -webkit-transform:translate(0, -2px); 
 
} 
 

 
.message-sent-last::after { 
 
    content:""; 
 
    position:absolute; 
 
    z-index:1; 
 
    bottom:-2px; 
 
    right:-56px; 
 
    width:26px; 
 
    height:20px; 
 
    border-bottom-left-radius: 10px; 
 
    -webkit-transform:translate(-30px, -2px); 
 
    background: transparent; 
 
}

<div class="message-sent message-sent-last"> 
 
    Hey there! What's up? 
 
</div>

私はスニペットは異なる背景色でいくつかの場所で使用されますので、ページの背景色を繰り返さないようにしたいと思います。私は透明で、継承してみましたが、うまくいきませんでした。

私はUbuntuの下ChromeとFFでテストしてみた：

これは、第二のスニップがどのように見えるかです。

あなたはどう思いますか？

Answer 1

あなたのケースでは、変数を使用することをお勧めしますdivの背景の同じ色を割り当てるためにバブルの作成のために基本的なので、体の色は、 DIV ::の後に変更されます。

は、CSSファイルの先頭に追加します。あなたの体の要素で

:root { 
    --main-bg-color: red; 
} 

を：

body {background-color: var(--main-bg-color);} 

とDIV：

.message-sent-last::after { 
    content:""; 
    position:absolute; 
    z-index:1; 
    bottom:-2px; 
    right:-40px; 
    width:10px; 
    height:20px; 
    border-bottom-left-radius: 10px; 
    -webkit-transform:translate(-30px, -2px); 
    background: var(--main-bg-color); 
} 

これにより、ルートで変更して、両方の要素に変更を有効にすることができます。

IEでは動作しませんのでご注意ください。