css对话框的小三角

在网页设计中，经常需要用到弹出层，而弹出层中的对话框往往需要一个小三角来指示弹出层的来源位置。这个小三角可以用CSS实现。

.dialog {
  position: absolute;
  width: 200px;
  height: 100px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  Box-shadow: 0 0 10px rgba(0,.3);
  z-index: 9999;
}

.dialog::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  transform: translateX(-50%);
}

上面的代码中，我们定义了一个对话框，然后用伪元素:before来实现小三角。

:before伪元素创建了一个绝对定位的元素，并把它放在被选元素的前面。我们利用它来创建小三角，并定位在对话框上方。

其中，bottom属性设置了伪元素与对话框底部之间的距离，为-100%，使其位于对话框上方；left属性设置伪元素左侧的位置，为50%，使其水平居中；border-width和border-style属性设置了伪元素的三角形形状；border-color属性则设置了三角形的颜色，所以显示为白色。最后，我们用transform属性来水平居中这个小三角。