如何用CSS创建一个漫画气泡？

Question

我希望创建这样的演讲： 我尝试使用CSS来实现，但我无法使上方的箭头对齐。我的代码如下：

.bubble
{
  position: relative;
  width: 275px;
  height: 40px;
  padding: 5px;
  background: #C00006;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}

.bubble:after
{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 19px 79px;
  border-color: #C00006 transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -19px;
  top: -79px;
  left: 69%;
}

<br><br><br><br>
<div class="bubble"></div>

在线示例 (在 JSFiddle 上)。

- Vinod VT

---

对其应用3D变换；透视。 - user3795913

看这个，也许会有用 http://www.html5rocks.com/en/tutorials/shapes/getting-started/ - xkeshav

Answer 1

您可以使用skewX变形属性，并将变形的原点指定为以下方式来实现这一效果：

.bubble {
    position: relative;
        top: 4.8em;
    width: 275px;
    height: 40px;
    padding: 5px;
    background: #C00006;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

.bubble:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 19px 79px;
    border-color: #C00006 transparent;
    display: block;
    width: 0;
    z-index: 1;
    /* top: -79px; */
    bottom: 100%; /* better than specifying the top */
    right: 38px;  /* equal to width of the arrow, for instance */
    
    -webkit-transform: skewX(-45deg);
    -moz-transform: skewX(-45deg);
    -ms-transform: skewX(-45deg);
    -o-transform: skewX(-45deg);
    transform: skewX(-45deg);
    
    -webkit-transform-origin: 38px 100%;
    -moz-transform-origin: 38px 100%;
    -ms-transform-origin: 38px 100%;
    -o-transform-origin: 38px 100%;
    transform-origin: 38px 100%;
}

<div class="bubble"></div>

值得注意的是，CSS变换在IE 9及更高版本中得到支持。

- Hashem Qolami

---

@diEcho 我并没有完全优化其他声明，只是为了完整性而已。现在不需要再使用border-radius的供应商前缀了，伪元素上的display: block也是多余的。 - Hashem Qolami

Answer 2

您可以在:after伪选择器上使用CSS3的skew()方法，如下所示：

.bubble:after {
    -ms-transform: skew(-40deg, 0deg);
    -webkit-transform: skew(-40deg, 0deg);
    transform: skew(-40deg, 0deg);
}

这是一个 jsFiddle演示。

.bubble {
  position: relative;
  width: 275px;
  height: 40px;
  padding: 5px;
  background: #C00006;
  -webkit-border-radius: 14px;
  -moz-border-radius: 14px;
  border-radius: 14px;
}
.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 27px 79px;
  border-color: #C00006 transparent;
  display: block;
  width: 0;
  z-index: 1;
  margin-left: -19px;
  top: -79px;
  left: 69%;
  -ms-transform: skew(-40deg, 0deg);
  -webkit-transform: skew(-40deg, 0deg);
  transform: skew(-40deg, 0deg);
}

<br/>
<br/>
<br/>
<br/>
<div class="bubble"></div>

- Fahad Hasan

Answer 3

请尝试这个 http://jsfiddle.net/harshdand/gczu8w4e/

.bubble:after
{
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 19px 120px;
    border-color: #C00006 transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -49px;
    top: -79px;
    left: 95%;
    -ms-transform: (50deg);
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}

transform: rotate(50度);

编辑

使用 skew 代替 rotate。请查看具有最小CSS的片段。

transform: skew(-45deg);

.bubble {
  position: relative;
  bottom: -70px;
  width: 275px;
  height: 40px;
  padding: 5px;
  background: #C00006;
  border-radius: 14px;
}
.bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 0 19px 79px;
  border-color: #C00006 transparent;
  width: 1px;
  z-index: 1;
  bottom: 95%;
  left: 79%;
  transform: skew(-45deg);
}

<div class="bubble"></div>

- Harsh

---

这将从基线上升起。 - xkeshav