如何创建一个弯曲的对话泡泡?
How to create a curved speech bubble?
我正在尝试用 div 制作一个弯曲的对话泡泡,如下所示:
这是我试过的方法,但它确实不起作用:
.userMsgBottom{
position: relative;
display: inline-block;
max-width: 260px;
height: auto;
word-wrap: break-word;
background-color: #2e7384;
margin-top: 12px;
margin-left: 8px;
margin-right: 8px;
padding: 7px;
border-radius: 6px;
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
right: 5px;
width: 70px;
height: 30px;
background-color: #2e7384;
transform: skew(45deg);
transform-origin: top right;
border-radius: 0 15% 5% 0% / 25%;
z-index: -1;
}
它是这样做的:
我该怎么做?
我会考虑 radial-gradient
这样做:
.userMsgBottom {
position: relative;
display: inline-block;
color:#fff;
max-width: 260px;
background-color: #2e7384;
margin: 12px 8px 0;
padding: 7px;
border-radius: 6px;
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
right: -23px;
width: 30px;
height: 25px;
background: radial-gradient(circle at top right, transparent 58%, #2e7384 60%);
}
<div class="userMsgBottom">
Some text here<br> Some text here<br> Some text here
</div>
我正在尝试用 div 制作一个弯曲的对话泡泡,如下所示:
这是我试过的方法,但它确实不起作用:
.userMsgBottom{
position: relative;
display: inline-block;
max-width: 260px;
height: auto;
word-wrap: break-word;
background-color: #2e7384;
margin-top: 12px;
margin-left: 8px;
margin-right: 8px;
padding: 7px;
border-radius: 6px;
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
right: 5px;
width: 70px;
height: 30px;
background-color: #2e7384;
transform: skew(45deg);
transform-origin: top right;
border-radius: 0 15% 5% 0% / 25%;
z-index: -1;
}
它是这样做的:
我该怎么做?
我会考虑 radial-gradient
这样做:
.userMsgBottom {
position: relative;
display: inline-block;
color:#fff;
max-width: 260px;
background-color: #2e7384;
margin: 12px 8px 0;
padding: 7px;
border-radius: 6px;
}
.userMsgBottom:after {
content: "";
position: absolute;
bottom: 0px;
right: -23px;
width: 30px;
height: 25px;
background: radial-gradient(circle at top right, transparent 58%, #2e7384 60%);
}
<div class="userMsgBottom">
Some text here<br> Some text here<br> Some text here
</div>