002-CSS-三角形

普通三角形

💡 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);
}