CSS——css 左上三角包含文字或左上三角包含对勾样式

dbt@L

于 2025-02-15 14:44:44 发布

阅读量261

点赞数 2

CC 4.0 BY-SA版权

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

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

CSS 专栏收录该内容

68 篇文章

订阅专栏

左上三角包含对勾效果：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码:

<template>
  <view class="list position-relative active">
    <view class="title"> 测试文本测试文本 </view>
  </view>
</template>

<style lang="scss" scoped>
.active {
  position: relative;
  border: 1rpx solid #1677ff;
  &:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    border: 25rpx solid #1677ff;
    border-bottom-color: transparent;
    border-right-color: transparent;
    border-radius: 13rpx 0 0 0;
  }

  &:after {
    content: "";
    width: 4px;
    height: 10px;
    position: absolute;
    left: 5px;
    top: 2px;
    border: 1px solid #fff;
    border-bottom-color: transparent;
    border-right-color: transparent;
    transform: rotate(225deg);
  }
}

.list {
  border-radius: 13rpx;

  padding: 33rpx;
  margin-bottom: 25rpx;

  .title {
    font-size: 34rpx;
    color: rgba(0, 0, 0, 0.9);
    margin-bottom: 12rpx;
    font-weight: bold;
  }

  .content {
    font-size: 30rpx;
    color: rgba(0, 0, 0, 0.6);
  }
}
</style>

左上三角包含文字效果：
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

代码：

<template>
  <div class="mark">
    <div class="text">标记</div>
  </div>
</template>

<style lang="scss" scoped>
.mark {
  width: 0px;
  height: 0px;
  border-top: 30px solid red;
  border-right: 30px solid transparent;
  position: relative;
}
.text {
  color: #fff;
  white-space: nowrap;
  transform: rotate(-45deg) scale(0.5);
  position: absolute;
  top: -29px;
  left: -8px;
}
</style>