如何创建弯曲的气泡? [英] How to create a curved speech bubble?
本文介绍了如何创建弯曲的气泡?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正试图在div中制作一个弯曲的气泡,如下所示:
I'm trying to make a curved speech bubble out of a div, like this:
这是我尝试过的方法,但实际上并不起作用:
This is what I've tried, but it doesn't really work:
.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
来做到这一点:
I would consider radial-gradient
to do this:
.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>
这篇关于如何创建弯曲的气泡?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文