【折騰】CSS 角標文字（失敗版）

前言#

其實原來弄過同樣的效果，，然而我卻忘記是從哪兒抄得了。。然後現搜了一個抄，結果總覺得各種不對。。

快弄完才想起來，，我當時是從 Z-Blog 應用中心抄得，，收費應用的價格就是角標效果。。。emmm

代碼#

以下方法倒也是能實現，但是在三角形的直角邊與父元素重合定位時要計算尺寸，或者微調試值。。。

<style>
  .mz-wraper,
  .mz-wraper * {
    box-sizing: border-box;
  }
  .mz-body {
    position: relative;
    width: 180px;
    height: 180px;
  }
  .mz-icon {
    position: absolute;
    right: 0;
    top: 0;
    transform: rotateZ(45deg);
  }
  .mz-icon .mz-bg {
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 37px 37px 37px;
    border-color: transparent transparent #20C05C transparent;
    /* ↓ 這兩個值得確定比較麻煩 ↓ */
    margin-right: -21.5px;
    margin-top: -15.5px;
  }
  .mz-icon .mz-text {
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    text-align: center;
    /* ↓ 這個值也要單獨確定 ↓ */
    width: 31px;
    color: #FFF;
  }
</style>

<div class="mz-wraper">
  <div class="mz-body">
    <img src="logo.png" class="mz-img">
    <div class="mz-icon">
      <span class="mz-bg"></span>
      <span class="mz-text">推薦</span>
    </div>
  </div>
</div>