css三角形带阴影

CSS三角形带阴影是一个常见的设计元素，在网页设计和UI设计中经常被使用。可以使用CSS来实现这种效果，而不需要使用图片或其他非常规技术。

实现CSS三角形带阴影的方法是使用伪元素（pseudo-elements）来创建一个边框。使用伪类:before或:after创建一个伪元素，将其放在需要添加三角形的元素的上面或下面。然后可以使用CSS的border属性来创建一个三角形形状。

.element:before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  border: 10px solid;
  border-color: transparent transparent #333 transparent;
  Box-shadow: 0 2px 4px rgba(0,0.2);
}

以上代码将创建一个向下的三角形，位于元素的上方，并带有一个2像素的阴影效果。

注意到border-style属性必须设置为solid，才能创建一个三角形形状。border-color的最后一个值设置为三角形的颜色，前三个值设置为透明，以便创建一个三角形尖端的透明效果。

另外，在设置伪元素的left值时，需要设置为50%，也就是将三角形水平居中。然后使用margin-left属性来设置三角形的偏移量。

使用Box-shadow属性可以创建阴影效果，可以自由调整阴影的大小和颜色。

综上所述，使用CSS创建一个带有阴影的三角形非常简单。只需要使用border属性和伪元素即可实现这种效果。