纯css在div上添加小三角

纯css在div上添加小三角

有些项目中会遇到这样的需求，就是div容器上要突出来一个小三角，如下图

虽然在功能上没啥意义，但是人家UI就是要这个小三角，你能怎么办，咱必须给他整出来！
我们用伪类和border来画这个小三角。

.box {//首先准备一个div
  height:100px;
  width:100px;
  background: white;
  position: relative;
}
.box::before {  //这里就是小三角了
  content: "";
  display: block;
  position: absolute;
  left: -20px;  //给小三角定位，更具实际需求调整
  top: 75px;    //给小三角定位，更具实际需求调整
  border-width: 10px;
  border-style: dashed  solid  dashed  dashed;//四个参数分别代表向下，左，上右的小三角(对应方向的小三角设置为solid，其他的为dashed。我这里演示向左的小三角，所以设置第二个）
  border-color:transparent black transparent transparent;//四个参数分别代表向下，左，上右的小三角。对应方向的小三角设置你想要的颜色（为了直观我这里设置黑色），其他的为transparent。我这里演示向左的小三角，所以设置第二个。
}

这样我们就得到一个带小三角的div了。

这时候不算完，人家UI又说了，要有边框，hover后还得可以变色…如下

可我们这个小三角本身就是用border实现的，总不能给border加一个border吧。
没事…不慌，我们来个骚操作。
我们准备两个小三角，一个是白色的，一个是边框的颜色，让白色小三角覆盖在有边框颜色的小三角上，定位错开1px，这样看起来就像是有了1px的边框了！

html

<div class="mycard">
  <div class="triangle triangle_border" />
  <div class="triangle triangle_bg" />
</div>

css

.mycard {
  height:100px;
  width:100px;
  position: relative;
}
.triangle {
  position: absolute;
  top: 39px;
  overflow: hidden;
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: dashed  solid  dashed  dashed;
}
.triangle_bg {
  left: -20px;
  z-index: 3;
  border-color:transparent white transparent transparent;
}
.triangle_border {
  left: -21px;
  border-color:transparent #E4E7ED transparent transparent;
}

.mycard:hover .triangle_border {
  border-color:transparent #024EA5 transparent transparent;
}

这样就得到了有边框且hover会变色的小三角了。