<分区>
CSS - 创建高级形状。 (倒三 Angular ？)
标签 css
我正在尝试创建一个类似于此的消息气泡:
然而，我所能做的就是:
使用这个 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，但没有达到预期的效果
最佳答案
我会尝试这样的事情 - 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%;
}
您可以添加另一个元素以从 TV 形状突出来创建谈话气泡效果。有关您可以做什么和不能做什么的更多想法，我会去 here .
关于CSS - 创建高级形状。 (倒三 Angular ？)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37195270/