css实现右下角√对号选中样式

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~

 

 

一、效果图

效果图如下所示：

 

 

二、代码

html

<view class="list">
            <view class="listItem">
              <view class="listItemChoice choiceActive">选中样式尾部省略…</view>
              <view class="listItemChoice">点击=选中</view>
              <view class="listItemChoice">是否展示全部选项</view>
              <view class="listItemChoice">是否存在供应商名称很长的情况，若有可一行显示</view>
            </view>
          </view>

 

less代码

.choiceActive {
        color: #02b978;
        background: rgba(154, 237, 197, 0.5);
        &::before {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          border: 16px solid #02b978;
          border-top-color: transparent;
          border-left-color: transparent;
        }
        &::after {
          content: '';
          width: 5px;
          height: 10px;
          position: absolute;
          right: 6px;
          bottom: 7px;
          border: 1px solid #fff;
          border-top-color: transparent;
          border-left-color: transparent;
          transform: rotate(45deg);
        }
      }

 

 

 

欢迎关注前端早茶，与广东靓仔携手共同进阶

前端早茶专注前端，一起结伴同行，紧跟业界发展步伐~