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

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

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

当然，对于不支持 SVG 的浏览器，也不要使用 PNG 回退。

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

Answer 2

要将箭头移到左侧，只需更改伪元素的位置和边框即可。然而，此时，我不认为在不引入更多复杂性（如剪切蒙版）的情况下创建凹曲线是不可能的。在 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 3

看来你只是把它放在了底部而不是左边...

.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 4

您可以使用伪元素（及其技巧）生成类似的东西：

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 5

另一种可能，供您选择

.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

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

How to make a curved triangle speech bubble with pseudo-elements?

css

css-shapes