前端css3实现角标【二维式与立体式角标实现】

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅css

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 小目标: 成为 会设计、会开发的 “万能钥匙”

📝文章内容

✍ 一、2D角标

在这里插入图片描述

<template>
  <div class="boxConter">
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201603%2F03%2F20160303222222_Lhk5G.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656928035&t=1fb572562b4a70b80169b5299ca6571e">
          <!--添加角标-->
          <div class="AngleOfTheBox">
              <span>刘亦菲</span>
          </div>
        </div>
</template>

<style lang="less" scoped>
  .boxConter{
    width: 300px;
    height: 200px;
    background-color: green;
    overflow: hidden;
    position: relative;
    img{
      width: 100%;
      height: 100%;
      max-width: 100%;
      max-height: 200px;
    }
    //角标主要样式
    .AngleOfTheBox{
      position: absolute;
      top: -50px;
      right: 260px;
      background-color: gold;
      width: 100px;
      height: 100px;
      transform: rotate(-50deg);
      //文字
      span{
        position: absolute;
        display: inline-block;
        color: #fff;
        width: 100%;
        bottom: 0;
        left: 0;
        text-align: center;
      }
    }

  }
</style>

✍ 二、立体式角标

在这里插入图片描述

<template>
  <div>
      <div class='cornerMarkBox'>
        <!--内容区域-->
          <img style="width:auto;height:auto;max-width:100%;max-height: 100%" src="https://preview.qiantucdn.com/58pic/44/05/54/47858PIC4pj2zTn5Dhzr6_PIC2018.png!w1024_new_0">
          <img style="width:auto;height:auto;max-width:100%;max-height: 100%" src="https://preview.qiantucdn.com/58pic/44/05/54/47858PIC4pj2zTn5Dhzr6_PIC2018.png!w1024_new_1024">
        <!--角标区域-->
        <div class='MarkBox'>
          <div class='insideBox'>水香木鱼</div>
        </div>
      </div>
  </div>
</template>

<style lang="less" scoped>
//去除img标签默认的水平和垂直间距
img {vertical-align:bottom}

//大盒子
.cornerMarkBox {
  width: 400px;
  height: 500px;
  position: relative;
  background: #1890ff;
  overflow: visible;
  margin: 20px;
  display: inline-block;
}

//角标盒子
.MarkBox {
  width: 106px;
  height: 108px;
  overflow: hidden;
  position: absolute;
  top: -6px;
  left: 297px;
  //内侧盒子
  .insideBox {
    line-height: 18px;
    text-align: center;
    transform: rotate(45deg);
    position: relative;
    padding: 8px 0;
    left: -8px;
    top: 25px;
    width: 150px;
    background: red;
    color: white;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    letter-spacing: 1px;
  }
}
.insideBox:before,
.insideBox:after {
  content: "";
  border-top: 4px solid #4e7c7d;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  position: absolute;
  bottom: -4px;
}
//左上阴影
.insideBox:before {
  left: 0;
}

.insideBox:after {
  right: 0;
}

</style>