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;
}

我该怎么做？

enter image description here

Answer 1

你可以使用伪元素（和他们的技巧）来生成类似的东西：

＆＃13;

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);
}

＆＃13;

<div>Hello world</div>

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

在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

尝试使用纯CSS实现曲线三角形可能非常棘手，所以我建议您使用矢量格式创建该形状，将其另存为SVG并在:after中使用它元件。

当然，为不支持SVG的浏览器省略PNG后备。

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

Answer 5

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

.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;
}

然而，这不会完全复制图像，而是显示曲线。虽然你可能只用一堆巧妙的边框技巧来复制那条曲线，但使用图像会更有意义。

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

5 个答案: