使用CSS给图片加上角标记

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

鲤鱼和龙虾

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

阅读量2.8k

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/lxj7607/article/details/116117370

版权

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

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

左上角代码

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

鲤鱼和龙虾

关注关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
使用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">.
复制链接

扫一扫