CSS——css选中右下角打勾样式

dbt@L

已于 2024-04-05 14:35:59 修改

阅读量490

点赞数 5

分类专栏： CSS 文章标签： css

于 2024-04-05 14:34:58 首次发布

本文链接：https://blog.csdn.net/qq_43201350/article/details/137400248

版权

CSS 专栏收录该内容

57 篇文章 1 订阅

订阅专栏

文章详细描述了一个带有圆角边框的按钮在激活状态下的CSS样式，包括:before和:after伪元素的使用，以及创建的动画效果。

摘要由CSDN通过智能技术生成

<view class="btn active">按钮</view>

  .btn {
    border-radius: 8rpx;
    padding: 14rpx 130rpx;
    height: 74rpx;
    position: relative;
    right: 0;
    bottom: 0;
  }

.active {
  &:before {
    border-radius: 8rpx;
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    border: 12px solid #1677ff;
    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);
    border-radius: 4rpx;
  }
}