CSS：斜角标签

最新推荐文章于 2024-07-08 11:32:20 发布

AIGC小陈

最新推荐文章于 2024-07-08 11:32:20 发布

阅读量2.5k

点赞数 1

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_53312997/article/details/124941579

版权

斜角标签是前端toC开发常见的场景，其效果图大概如下：

中间的空盒子常为优惠券、商品等卡片，斜角的标签可能是折扣、售罄、补货等，今天就普及一下这类斜角标签的实现方式

主要在卡片的盒子内新建一个长条的标签盒子，通过定位的方式调整位置，然后再通过变形transform: rotate(45deg)，旋转45度角，超出卡片盒子的部分设置overflow:hidden;

首先，创建卡片盒子：

 <div class="card"></div>

.card{
  width:100px;
  height:100px;
  border:1px solid #000;
  overflow: hidden; // 隐藏标签的超出部分
  position: relative;
}

设置大小边框等属性，设置position:relartive来作为定位锚点，设置超出隐藏；

接着，创建标签盒子，并设置样式：

 <div class="card">
   <div class="tag">售罄</div>
</div>

关注