【試行錯誤】CSS 角標文字（失敗版）

前言#

実は以前に同じ効果を作ったことがありましたが、どこからコピーしたのか忘れてしまいました... そして、検索してコピーしたものを見つけたのですが、なんだかうまくいかないような気がします...

作業がほぼ終わった時に思い出しましたが、当時は Z-Blog アプリセンターからコピーしたもので、有料アプリの価格が角の効果だったんです... えっと...

コード#

以下の方法でも実現できますが、三角形の直角辺と親要素が重なる位置を計算したり微調整したりする必要があります...

<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>