作者:星汇半岛车位销售 | 来源:互联网 | 2023-05-18 02:57
我正在用CSS创建气泡,目前为止。
.says{
width: 200px;
padding: 20px;
margin-right: 20px;
background: #BF7EF2;
color: #fff;
box-shadow: -3px 3px 5px #C1B9C8;
position: relative;
border-radius: 5px;
}
.says:before{
content: "";
position: absolute;
z-index: -1;
top: 14px;
right: -18px;
height: 20px;
border-right: 20px solid #BF7EF2;
border-bottom-right-radius: 25px 20px;
transform: translate(0, -4px);
box-shadow: -3px 3px 5px #C1B9C8;
}
.says:after{
content: "";
position: absolute;
z-index: -1;
top: 7px;
right: -18px;
width: 30px;
height: 30px;
background: #fff;
border-bottom-left-radius: 40px 35px;
transform: translate(0px, -20px);
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione aut facere cupiditate, sunt, nisi fugiat consectetur officiis veniam!
基本上我已经使用:before
和:after
伪类和应用border-radius
。然后彼此重叠以达到期望的效果。现在你可以看到,我使用background: #fff
的:after
,因为当前的父的背景是白色的。这将遍及我的应用中具有不同bg颜色的许多不同的div。这就是我现在遇到的问题。
例-
是否可以在不使用background属性的情况下获得相同的“语音泡沫”尾巴:after
?
^此行解释说它不是链接问题的重复项。
还是通过其他完全不同的方式?
1> vals..:
正如webtiki所说,您可以根据我之前的回答获得此结果(即使可能有点困难)
.container {
width:300px;
margin:5px;
}
.test
{
position: relative;
width: 300px;
height: 150px;
padding: 0px;
background: pink;
border-radius: 6px;
}
.test:after {
content: '';
top: 1px;
right: -29px;
position: absolute;
border: 0px solid;
display: block;
width: 38px;
height: 26px;
background-color: transparent;
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
box-shadow: -21px 9px 0px 8px pink;
}