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

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中测试过(最新版本)