CSS でペーパーの角がめくれているような表現をするために、「CSS 紙 折り返し」などと Google 先生にお尋ねしてみると、border プロパティを利用した方法がたくさんでてきます。

しかし、よくあるこの方法ではページの背景色と角がめくれてカットされている部分(ボーダー)の色が同色にする必要があります。
汎用性のある装飾を想定した場合、表示される背景要素の色に合わせてこのカットされているボーダー部分の色も CSS で個別に指定しておく、などの方法はもはや汎用性を崩壊させてしまいます。

そこで、clip-path を利用して表示される背景要素のカラーに依存せず、角がめくれたよう効果を施す方法を実装してみます。

HTML

HTML は、例えば div で専用セレクタ(.label)を付けたテキストを括るだけです。

<div class="label">ラベル</div>

CSS

.label セレクタを付けた要素の ::before 疑似セレクタは背景にし、::after 疑似セレクタは角のめくれを表現するための任意のサイズの四角形にします。

/* ラベルのベース */
.label{
  position: relative;
  font-size: 22px;
  font-weight: 700;
  padding: 10px 14px;
  display: inline-block;
  color: #fff;
  box-shadow: 0 8px 16px -6px rgba(#000,0.26);
}

/* ::before, ::after　共通スタイル */
.label::before, .label::after {
  content: "";
  position: absolute;
  z-index: -1;
}

/* ラベルの背景 */
.label::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // 背景色
  background-color: #0685c7;
  // 右上角の辺を 14px　ななめに切り抜き 
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}

/* 右上角のめくれ */
.label::after {
  top: 0%;
  right: 0%;
  // 14 x 14 px の正方形
  height: 14px;
  width: 14px;
  // 折り返し部分のカラー
  background-color: rgba(0, 0, 0, 0.52);
  // 右上半分を切り抜き(三角形)
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

このサンプルでは角の折り返し部分は 縦 x 横 14ピクセルで表現していますが、サイズや折り返し部分のカラーは希望のスタイルに自由に変更してください。

よくある border での表示と、この clip-path での方法を比較した実際の表示はこちら。

See the Pen Fold Label by digistate (@digistate) on CodePen.