普通三角形

💡 Tips：设置 div 盒子宽高为零，使用单边框实现

.triangle {width: 0;height: 0;border: 20px solid transparent;border-top-color: #ccc;
}

带阴影的三角形：box-shadow

💡 Tips：在普通三角形基础上，添加 box-shadow ，设置阴影方向、偏移量，搭配伪元素遮挡 实现

.tips-add-shadow {width: 300px;height: 200px;border-radius: 4px;background: #fff;box-shadow: 2px 2px 20px #ccc;margin-left: 50px;position: relative;margin-bottom: 50px;
}.tips-add-shadow::before {content: '';width: 0;height: 0;position: absolute;top: 180px;left: calc(50% - 20px);background: #fff;border: 20px solid transparent;border-top-color: #fff;border-right-color: #fff;transform: rotate(135deg);box-shadow: 2px -2px 20px #ccc;
}.tips-add-shadow::after {content: '';width: 80px;height: 40px;position: absolute;top: 160px;left: calc(50% - 40px);background: #fff;
}

实现效果图如下：

带阴影的三角形：filter

💡 Tips：filter 为滤镜的意思，可实现很多特殊样式。此处采用 filter 实现阴影

.tips-add-shadow {width: 300px;height: 200px;border-radius: 4px;background: #fff;box-shadow: 2px 2px 20px #ccc;margin-left: 50px;position: relative;margin-bottom: 50px;
}.tips-add-shadow::after {content: '';width: 0;height: 0;position: absolute;top: 200px;left: calc(50% - 30px);border-left: 30px solid transparent;border-right: 30px solid transparent;border-top: 30px solid #fff;filter: drop-shadow(0 3px 2px #ccc);
}