vue -- 角标的添加

效果图：

有的时候，在图片或者标签的左（右）上角展示一个角标。那么该如何实现呢？

思路：

1. 图片包裹在一个容器里，且这个容器有定位属性便于后代元素进行定位，溢出部分隐藏（为了仅显示一个三角）
2. 一个角标标签，旋转45度+绝对定位（top:角标标签高度的一半，right:角标标签宽度的一半）
3. 角标标签内部一个元素，用于控制文案展示在角标标签的底部

代码如下：

<template>
  <div class="root-container">
    <h2 class="mb10">看，我有角标哦</h2>
    <el-input v-model="val" :style="{width:'400px'}" />
    <div class="avatar mt20">
      <div class="angle_mark">
        <span>{{val}}</span>
      </div>
      <img :src="init_avatar" alt='load error' />
    </div>
  </div>
</template>
<script>
export default {
  name: "index",
  data() {
    return {
      val: "i'm 角标",
      init_avatar: "http://touxiangkong.com/uploads/allimg/20203301301/2020/3/Vzuiy2.jpg"
    };
  }
};
</script>
<style lang='scss' scoped>
.mb10{
	margin-bottom: 10px;
}
.mt20{
	margin-top: 20px;
}
.avatar {
  // 父容器
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;

  // 角标
  .angle_mark {
    position: absolute;
    top: -50px;
    right: -50px;
    background-color: #7173da;
    width: 100px;
    height: 100px;
    transform: rotate(45deg);
    // 角标文字
    span {
      position: absolute;
      display: inline-block;
      color: #fff;
      width: 100%;
      bottom: 0;
      left: 0;
      text-align: center;
    }
  }
}
</style>