CSS實現斜角標簽

在商品列表中，經常會遇到“售罄”、“熱賣”等標簽，本篇博客介紹如何使用CSS實現斜角標簽，效果圖如下：

.wxml代碼

<view class='sellout_box'>
  <view class='sellout'>
    補貨中
  </view>
</view>

.wxss代碼

.sellout_box {
  width: 48%;
  height: 530rpx;
  background-color: white;
  margin: 10rpx 0;
  overflow: hidden;
  position: relative;
}

.sellout {
  background-color: gray;
  color: white;
  width: 70%;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  margin-left: 45%;
  margin-top: 40rpx;
  position: absolute;
  transform: rotate(45deg);
}

Tips：父元素設置 overflow:hidden 隱藏溢出部分，父元素設置 position:relative 相對定位，配合子元素設置 position:absolute 絕對定位，子元素設置旋轉45度 transform:rotate(45deg)，溢出部分自動隱藏。