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

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅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>

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了前端css实现角标效果】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕

💡往期精彩

🈯前端快速排序算法【JavaScript 与vue通用】

🈯前端冒泡排序算法【javaScript与vue通用】

🈯vue快速实现锚点功能【简单版与高级版】

🈯前端vue实现高级检索小案例

🈯UI设计指南之可视化大屏【快速理解版】