css实现下拉icon(空心三角）、气泡框

空心三角

.arrow{
  width:0px;
  height:0px;
  border: 30px solid transparent;
  border-bottom-color: orchid;
  border-top-width: 0;
  position: relative;
}
.arrow::after{
  content: "";
  position: absolute;
  right: -30px;
  top: 5px;
  width:0px;
  height:0px;
  border: 30px solid transparent;
  border-bottom-color: #fff ;
  border-top-width: 0;
  z-index: 2;
}

原理

应用三角箭头（见上篇# css实现三角形）实现。

先生成外层带颜色的三角div。并设置为 relative 定位。

再设置伪类 after, 设置成一个较小点的三角且颜色为白色，并用absolute 定位都父级对应的位置，遮挡住一部分，以达到空心三角的效果

应用：气泡框

.popup{
  width: 100px;
  height: 100px;
  border: 2px solid red;
  position: relative;
}
.popup::after{
  content: "";
  position: absolute;
  width: 0px;
  height: 0px;
  border-style: solid;
  bottom: 24px;
  right: -14px;
  border-color: transparent transparent transparent red;
  border-width: 14px 0 14px 14px;
}
.popup::before{
  content: "";
  position: absolute;
  z-index: 1;
  width:0px;
  height: 0px;
  border-style: solid;
  bottom: 26px;
  right: -11px;
  border-color: transparent transparent transparent #fff;
  border-width: 12px 0 12px 12px;
}