纯css3绘制标签

UI设计稿要求

html

<div class="recommend"></div>

css

    .recommand {
          position: absolute;
          top: 0;
          right: 6px;
          width: 20px;
          height: 15px;
          text-align: center;
          font-size: 12px;
          color: #fff;
          background: #f55f23;
          &::after {
            position: absolute;
            left: 4px;
            top: 5px;
            z-index: 2;
            content: '荐';
          }
          &::before {
            position: absolute;
            top: 10px;
            left: 0;
            content: "";
            z-index: 1;
            width: 0;
            height: 0;
            border: solid 10px #f55f23;
            border-bottom-color: transparent;
          }
      }

效果