使用CSS给图片加上角标记

最新推荐文章于 2024-02-22 17:09:44 发布

原创最新推荐文章于 2024-02-22 17:09:44 发布 · 3.2k 阅读

8 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何使用CSS为图片添加角标记，通过定位和伪类元素实现。展示了左上角和右上角标记的代码示例，强调了可以根据需要调整定位和文字方向。

实现后的效果，图片左上角有了标记信息

主要是通过定位和伪类实现

左上角代码

<html>
<div class="wrap">
  <img width="200" height="200" src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></img>
  <!-- 标记信息 -->
  <p class="mark">
    <span class="text">3F</span>
  </p>
</div>

</html>

<style>
  .wrap {
    position: relative;
  }

  .mark {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
  }

  .mark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 40px;
    z-index: 1;
    border-color: rgba(206, 3, 5, .7) transparent transparent rgba(206, 3, 5, .7);
  }

  .text {
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg) translateZ(0);
    transform: rotate(-45deg) translateZ(0);
    color: #FFF;
    display: inline-block;
    position: absolute;
    top: 10px;
    left: 0;
    z-index: 1;
    font-size: 24px;
    text-transform: uppercase;
    width: 50px;
    text-align: center;
  }
</style>

主要是参考的网上的写法，类似的，可以将标记放到右上角

右上角代码，主要是定位稍微改了下，右上角的文字也可以旋转，但是旋转后还要改translateX和translateY进行调整，感觉没必要

<html>
<div class="wrap">
  <img width="200" height="200" src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"></img>
  <!-- 标记信息 -->
  <p class="mark">
    <span class="text">3F</span>
  </p>
</div>

</html>

<style>
  .wrap {
    position: relative;
  }

  .mark {
    position: absolute;
    top: 0;
    left: 200;
    margin: 0;
  }

  .mark:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-style: solid;
    border-width: 40px;
    z-index: 1;
    border-color: rgba(206, 3, 5, .7) rgba(206, 3, 5, .7) transparent transparent;
    transform: translateX(-100%);
  }

  .text {
    -moz-transform: rotate(0deg) translateX(-100%) translateZ(0);
    -ms-transform: rotate(0deg) translateX(-100%) translateZ(0);
    -o-transform: rotate(0deg) translateX(-100%) translateZ(0);
    -webkit-transform: rotate(0deg) translateX(-100%) translateZ(0);
    transform: rotate(0deg) translateX(-100%) translateZ(0);
    color: #FFF;
    display: inline-block;
    position: absolute;
    top: 10px;
    /* left: 0; */
    z-index: 1;
    font-size: 24px;
    text-transform: uppercase;
    width: 50px;
    text-align: center;
  }
</style>