css 角标

效果图

代码实现

<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>