css实现右下角√对号选中样式——基础积累

最近在写vue后台样式，有个需求就是一个列表，有选中样式。效果图如下：

这个样式可以通过css直接实现：通过伪元素来实现。

.activeCls {
    
    
  position: absolute;
  right: 0;
  bottom: 0;
  &:before {
    
    
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 12px solid #f90;
    border-top-color: transparent;
    border-left-color: transparent;
  }
  &:after {
    
    
    content: "";
    width: 5px;
    height: 10px;
    position: absolute;
    right: 4px;
    bottom: 5px;
    border: 1px solid #fff;
    border-top-color: transparent;
    border-left-color: transparent;
    transform: rotate(45deg);
  }
}

完成！！！