CSS实现纯右上角倾斜四十五度封页角以及小浮标效果

使用纯css来实现斜标

效果如图

具体代码如下

<div class="my-special-label">
  <div>
    <div>人事变动</div>
  </div>
</div>

  /*外层容器*/
  .my-special-label{
    position: absolute;
    right: 0
  }
  /*内层容器*/
  .my-special-label > div {
    width: 80px;
    height: 60px;
    overflow: hidden;
    position: relative;
    top: -18px;
    right: 10px;
  }
  /*小横标*/
  .my-special-label > div > div{
    font: bold 12px Sans-Serif;
    text-align: center;
    text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;
    transform: rotate(45deg);
    position: relative;
    padding: 0px;
    left: 17px;
    top: 15px;
    width: 80px;
    background-color: #e47b7b;
    background-image: linear-gradient(to top, #fd5656, #d60101);
    color: #f7f7f7;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
  }
  /*折叠角*/
  .my-special-label > div > div:before {
    left: 0;
  }
  .my-special-label > div > div:after {
    right: 0;
  }
  .my-special-label > div > div:before, .my-special-label > div > div:after {
    content: "";
    border-top: 1px solid #c5053f;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    position: absolute;
    bottom: -1px;
  }

具体的详细。可以自己微调

附带一个浮标

<div style="position:absolute"> 
  <div style="position: relative; width: 0px; height: 0px">
     <div class="overtime_tab" style="top: -19px; left: -35px;">超时</div>
  </div>
</div>

  .overtime_tab {
    position: relative;
    width: 40px;
    text-align: center;
    line-height: 22px;
    top: -19px;
    border-radius: 1px 1px 4px 4px;
    font-size: 13px;
    color: white;
    background-image: linear-gradient(to right, #ff0000, #d20101);
    box-shadow: 0px 6px 3px #f2dada;
  }