CSS - 创建高级形状。（倒三角形？）[重复]

【问题标题】：CSS - Creating advanced shapes. (Inverted Triangle?) [duplicate]CSS - 创建高级形状。（倒三角形？）[重复]
【发布时间】：2016-05-13 03:09:05
【问题描述】：

我正在尝试创建一个类似于此的消息气泡：

但是，我能做到的只有这样：

使用这个 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，但没有达到预期的效果

【问题讨论】：

此页面没有您想要的形状，但它可能会帮助您学习一些有用的技巧：css-tricks.com/examples/ShapesOfCSS
@Flynn1179 - 月亮把戏真的很酷，感谢链接。
我不知道这对你有什么帮助，但我很高兴 :)

标签： css

【解决方案1】：

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

【讨论】：

问题是关于如何创建气泡效果，从问题中可以看出我已经有了盒子以及附件。问题是塑造附件。您提供的链接已在 cmets 中提供，但没有帮助
@Hobbyist 您的消息气泡对我来说在视觉上并不清晰。但如果我理解正确，您将需要制作 2 个形状并将它们放在一起，以创建您正在寻找的东西。祝你好运！