css 角标

最新推荐文章于 2024-06-28 17:10:15 发布

优雅格子衫

最新推荐文章于 2024-06-28 17:10:15 发布

阅读量1.1k

点赞数 9

分类专栏： css 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_61869009/article/details/135158973

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

代码实现

<div class="container">
  <div class="subscript">
      <!-- 使用背景颜色渐变 -->
    <div class="subscript1"></div>
    <div class="texts">角标1</div>
      <!-- 使用三角形 -->
    <!-- <div class="subscript2"></div>
    <div class="texts">角标2</div> -->
    <!-- 使用矩形旋转,父元素使用 overflow:hidden -->
      <!-- <div class="subscript3"></div>
      <div class="texts">角标3</div> -->
  </div>
</div>

<style lang='scss' scoped>
.container {
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #888888;
  position: relative;
  border-radius: 10px;
}

.subscript {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 10px 0px 0px 0px;
  .subscript1 {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #09a6be 50%, transparent 50%);
  }
  .subscript2 {
    width: 0;
    height: 0;
    border-top: 100px solid #09a6be;
    border-right: 100px solid transparent;
  }
  .subscript3 {
    width: 140px;
    height: 140px;
    margin:-70px -70px;
    background: #09a6be;
    transform: rotateZ(45deg);
  }
}
 .texts {
  position: absolute;
  top: 20%;
  left: 15%;
}
</style>