最近在写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);
}
}
完成!!!