CSS - 创建高级形状。（倒三角形？）

我试图创建一个消息气泡，看起来与此类似：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，但它没有yeild Ë预期的效果

来源

2016-05-12 Hobbyist

此页面没有您要查找的形状，但它可以帮助您了解一些可能有所帮助的技巧：https://css-tricks.com/examples/ShapesOfCSS/ – Flynn1179

@ Flynn1179 - 月亮技巧非常酷，感谢链接。 – Hobbyist

我不知道这对你有什么帮助，但我很高兴它:) – Flynn1179

我会尝试这样的事情 - 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。

来源

2016-05-12 19:07:44

问题在于如何创建泡沫效果，正如你可以从问题中看到的那样，我已经有了框，以及附件。问题在于塑造依恋。你提供的链接已经在评论中提供，并没有帮助 – Hobbyist

@爱好者你的消息气泡对我来说并不直观。但是，如果我理解正确，你将需要制作两个形状并将它们放在一起，以创建你想要的东西。祝你好运！ –

CSS - 创建高级形状。 （倒三角形？）

回答

相关问题

CSS - 创建高级形状。（倒三角形？）