如何用伪元素制作一个弯曲的三角形语音气泡？

Question

大家好，我正在尝试使用 CSS ::after 伪元素制作一个弯曲的三角形语音气泡。

我已经创建了这样的DEMO：

.test 
{
position: relative;
width: 430px;
height: 175px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

.test:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 14px 14px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
bottom: -14px;
left: 8px;
}

我怎么喜欢这张照片？

Answer 1

你可以使用伪元素（及其诡计）来生成 类似的东西：

---

div {
  height: 200px;
  width: 350px;
  background: tomato;
  margin: 50px;
  position: relative;
  display: inline-block;
}
div:before {
  content: "";
  position: absolute;
  height: 40px;
  width: 40px;
  background: tomato;
  bottom: 2%;
  left: -15px;
  border-radius: 0 0 100% 0;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}
div:after {
  content: "";
  position: absolute;
  height: 40px;
  width: 10px;
  background: white;
  bottom: 7%;
  left: -18px;
  border-radius: 50%;
  -webkit-transform: rotate(35deg);
  transform: rotate(35deg);
}

<div>Hello world</div>

---

.test {
  height: 200px;
  width: 350px;
  background: tomato;
  border-radius: 5px;
  position: relative;
  margin: 20px;
}
.test:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  background: tomato;
  bottom: 20px;
  left: -6px;
  transform-origin: center center;
  transform: rotate(30deg);
    border-radius: 0 0 100% 0;
}
.test:after {
  content: "";
  position: absolute;
  height: 20px;
  width: 10px;
  background: white;
  bottom: 24px;
  left: -11px;
  border-radius: 50%;
  transform-origin: center center;
  transform: rotate(30deg);
}
.zoom {
  margin: 0 auto;
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
  border-radius: 0 0 100% 0;
  transform-origin:center center;
  transform: rotate(45deg);
  margin-top:50px;
}
.zoom:before {
  content: "";
  position: absolute;
  height: 100%;
  width: 50%;
  background: white;
  border-radius: 50%;
  left: -25%; top: 0;
}

<div class="test">hello world</div>

<hr/>

<div class="zoom"></div>

---

在 Chrome、IE 和 Firefox（最新版本）中测试

Answer 2

只是另一种可能性，让你可以选择

.test:after {
    content: '';
    position: absolute;
    border: 0px solid;
    display: block;
    width: 0;
    z-index: -1;
    bottom: 30px;
    left: -13px;
    width: 40px;
     height: 40px;
    background-color: transparent;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    box-shadow: 14px 10px 0px 10px white;
}

codepen

Answer 3

要将箭头移动到左侧，只需更改伪元素的位置和边框即可。然而，目前，我认为在不引入更多复杂性的情况下创建凹曲线是不可能的，比如剪切蒙版。在 Photoshop 或 Illustrator 中创建弯曲三角形的 .png 图像，然后根据需要将其放置在对话气泡旁边会更容易。

CodePen Example

HTML：

<div class="container">
    <div class="test"></div>
</div>

CSS：

body{
    background-color:#000;
}
.container {
    margin:0px auto;
    width:500px;
    margin-top:50px;
}
.test 
{
    position: relative;
    width: 430px;
    height: 175px;
    padding: 0px;
    background: #FFFFFF;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.test:after 
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0px 0px 15px 16px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: 4px;
    left: -15px;
}

Answer 4

看来您只是将其定位在底部而不是左侧...

.test:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 0 14px 14px;
    border-color: #FFFFFF transparent;
    display: block;
    width: 0;
    z-index: 1;
    bottom: 4px;
    left: -14px;
}

但是，这不会完全复制图像，而是显示一条曲线。虽然您可能只需要一些巧妙的边框技巧就可以复制该曲线，但使用图像会更有意义。

Answer 5

尝试使用纯 CSS 实现弯曲的三角形可能非常棘手，因此我建议您以矢量格式创建该形状，将其保存为 SVG 并在您的 :after 元素中使用。

当然，为不支持 SVG 的浏览器保存一个 PNG 后备。

正如其他人已经提到的，一个简单的 CSS 药水更改将使您的 :after 元素位于左下角，但 SVG 可能是您获得弯曲三角形形状的唯一选择。