我想制作与图像相同的对话泡泡形状。 下面显示的 CSS 的哪一部分可以修改以使其看起来像图片? 你能帮我得到我想要的样子吗?
.body{
background : linear-gradient(to bottom, #fff,red)
}
.chat {
position: relative;
width: 270px;
padding: 10px;
margin: 1em auto 50px;
text-align: center;
color: black;
background: #fff;
border: 1px solid gray;
border-radius: 30px;
}
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: -2px;
left: -7px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: -2px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-bottom-right-radius: 10px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat"></div>
最佳答案
我们无法完全按照原样提供。我试着让它接近形状。
.chat {
position:relative;
width:270px;
padding:10px;
height:50px;
margin:1em auto 50px;
text-align:center;
color:black;
background:#e5e5ea;
//border: 1px solid gray;
border-radius: 30px;
}
/* creates part of the curve */
.chat:before {
content: "";
position: absolute;
z-index: 2;
top: 7px;
left: -8px;
height: 20px;
border-left: 20px solid #E5E5EA;
border-bottom-right-radius: 16px 14px;
-webkit-transform: translate(0, -2px);
}
/* creates part of the curved pointy bit */
.chat:after {
content: "";
position: absolute;
z-index: 3;
top: 7px;
left: 4px;
width: 26px;
height: 20px;
background: white;
border-top-right-radius: 14px;
-webkit-transform: translate(-30px, -2px);
}
<div class="chat">
</div>
关于html - 使用 CSS 创建特定的聊天气泡形状,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68735246/