css 三角 阴影,用CSS3制作带box-shaodow阴影的三角的对话框

可以使用CSS3的伪元素(::before 或 ::after)来实现带阴影的三角形对话框。

首先，需要先设置一个带边框和圆角的矩形，然后再在矩形上添加一个伪元素来制作三角形。

下面是一个例子：

<div class="dialog-box">
  <p>这是一个对话框。</p>
</div>

.dialog-box {
  position: relative;
  width: 200px;
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

.dialog-box::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 20px;
  border: 10px solid transparent;
  border-top-color: #fff;
  box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.3);
}

在上面的例子中，我们使用了一个带圆角和边框的矩形作为对话框的主体，然后使用伪元素来制作下方的三角形。

伪元素的内容使用了空字符串，位置使用了绝对定位，bottom和left属性用来定位三角形的位置。

border属性用来制作三角形，其中border-top-color用来指定三角形的颜色。box-shadow属性用来添加阴影效果。

通过这种方式，我们可以很容易地制作出带阴影的三角形对话框。