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

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

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

 

 

一、效果图

效果图如下所示:

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

 

 

二、代码

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

 

 

 

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

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

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