我试图创建一个类似于此的消息泡泡:
但是,我能管理的就是:
使用此CSS:
#messaging #test:after {
content: "";
display: block; /* reduce the damage in FF3.0 */
position: relative;
bottom: 0px;
left: 120px;
width: 0;
transform: rotate(180deg);
border-width: 32px 30px 0;
border-style: solid;
border-radius-top: 10;
border-color: black transparent;
}
我尝试使用border-radius,但它没有达到预期的效果
答案 0 :(得分:0)
我会尝试这样的事情 - http://codepen.io/AndrewSepic/pen/EKJxqM
#tv {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
margin-left: 2rem;
}
#tv:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
您可以添加另一个元素从电视形状突出以创建谈话气泡效果。关于你能做什么的更多想法&不能做,我去here。