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

CSS选中右下角对勾是一种很有用的技巧，能够让网页更加美观和易于阅读。下面我们来介绍一下如何实现该功能。

首先，我们需要给要选中的对勾设置一个class，这里我们使用.checkmark。然后，我们将其定位到右下角，使用了position:absolute和bottom:0、right:0。接着，我们设置了背景色、文字颜色、高度、宽度、对齐方式、行高、字体大小、圆角等样式。最后，我们使用transform:rotate(45deg)将其旋转45度，得到了对勾的形状。

使用以上CSS代码，就可以实现右下角对勾的样式。当然，我们还可以根据实际需求进行调整，比如调整颜色、大小等等。

场景

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

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

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);
  }
}

完成！！！