你是如何产生这种效果的？

Question

如何让这个小三角形凸起在底部，就像图片泡泡一样？

不使用图像的最佳方法是什么？

Answer 1

这个名字叫做＃Bubble;＆＃39;。

＆＃13;

＆＃13;

p {
  font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;
  font-weight: bold;
  margin: 1em 0;
}

.triangle-isosceles {
  position: relative;
  padding: 15px;
  margin: 1em 0 3em;
  color: #fff;
  background: #0095ff;
}

.triangle-isosceles:after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50px;
  border-width: 10px 10px 0;
  border-style: solid;
  border-color: #0095ff transparent;
  display: block;
  width: 0;
}

＆＃13;

<p class="triangle-isosceles">Address</p>

＆＃13;

＆＃13;

＆＃13;

查看此示例：http://nicolasgallagher.com/pure-css-speech-bubbles/demo/

Answer 2

这是如何做到的：

.box {
  width: 200px;
  height: 25px;
  border-radius: 2px;
  padding: 5px;
  font-family: 'Arial';
  text-align: center;
  color: white;
  background-color: lightblue;
}

.box::after {
  content: ' ';
  position: relative;
  top: 36px;
  left: -75px;
  border-style: solid;
  border-width: 7px 7px 0;
  border-color: lightblue transparent;
}

Here is the JSFiddle demo

::after CSS伪是很重要的，因为这就是在底部创建小光标的原因。