纯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会变色的小三角了。

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐