前端css实现角标效果

Posted 2022-06-07 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端css实现角标效果相关的知识，希望对你有一定的参考价值。

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

📌博主介绍

💒首页:水香木鱼

🛫专栏：邂逅css

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

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

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

📝文章内容

✍ 一、主要css代码

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