CSS：斜角标签

我正在参加 码上掘金体验活动，详情：show出你的创意代码块

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第10天，点击查看活动详情。

前言

斜角标签是前端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>

.tag{
  text-align: center; // 文本居中 
  position: absolute; // 绝对定位
  background-color: grey; // 背景色
  color: #fff;
  // 以下属性会影响斜边标签的显示
  width: 80%;
  height: 18px;
  line-height: 18px;
  top: 10px;
  left:40%;
  transform: rotate(45deg);
  border:1px solid #000;
}

这里要注意，旋转的中心默认是以中心旋转，这会导致转45度会出现显示不全、显示不出文本等情况，而修改transform-origin也是没用的，无论它以哪个点，只旋转的话都是会显示不全的；

所以需要调节其位置，配合width，让其出现在合理的位置，最好是根据父元素的大小来决定其位置和大小，这样即使父元素大小不确定也能正确出现在角落；

代码参考：

如果有更好的实现方式或者错误欢迎指出~