伪类实现镂空三角形

目录

效果图 

代码

思路

---

效果图 

 实现这个使用两个伪类去实现的：after，：before

代码

//这个是vue项目中使用到的下述是简介的vue代码
 <div class="weilei"></div>

//css部分
<style scoped>
.weilei{
width: 200px;height: 25px;
}
.weilei::after{
  content:'';
  width: 0;
  height: 0;
  position: absolute;
  border-top: 15px solid black ;
  border-left: 15px solid transparent ;
  border-bottom: 15px solid transparent ;
  transform: rotate(-45deg);
  top: 10px;
  right: 60px;
}
.weilei::before{
  content:'';
  width: 0;
  height: 0;
  position: absolute;
  border-top: 12px solid #BBBBBB;
  border-left: 12px solid transparent ;
  border-bottom: 12px solid transparent ;
  transform: rotate(-45deg);
  z-index: 1;
  top: 13px;
  right: 63px;
}
</style>

思路

1、第一个after铺设出一个三角形状

2、随后使用before铺设另一个三角形状

3、before的三角形大小小于after三角形并他的背景和页面背景一样、使用z-index属性是before在上方，after被进行覆盖

4、通过定位实现位置