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文件的顶部：

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

和DIV：

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

在你的身体元素

.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浏览器虽然。