斜角标签技巧

[yyman001]

1.使用一个正方向,左上对齐, 45度,宽度根据实际调整 2.里面再加一个元素,主要是显示内容 3.使用margin进行斜对角偏移距离跳转

<span class="tags-free min"><em>免费</em></span>

.tags-free {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;

  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  margin: 0;
  width: 100px;
  height: 100px;

  font-size: 12px;
  color: #ffffff;
  text-align: center;
  transform: rotate(-45deg);

  em {
    display: inline-block;
    flex: 1;

    font-style: normal;
    background-color: #FC425F;
  }
  &.min {
    margin: -33px;
  }
}