フォカッチャフォカッチャ

BLOG

ブログ

【Tailwind CSS】左上にオシャレなラベルを表示する方法

以下のような、「左上にオシャレなラベルを表示するデザイン」って、よくありますよね。

本記事では、Tailwind CSS を使って実装してみようと思います。参考になれば嬉しいです。

コード(HTML)は、以下のとおりです。

<div className="size-40 relative overflow-hidden rounded-lg">
  <div className="absolute w-full top-0 -left-1/2 pt-4 origin-top -rotate-45">
    <div className="grid place-content-center text-sm bg-red-500 text-white py-1">
      NEW
    </div>
  </div>
  <div className="h-full bg-white grid place-content-center text-8xl">
    🍰
  </div>
</div>

ポイントは、

  • ラベル部分は absolute (絶対位置で表示)にする

  • rotate を使って回転させる

  • 回転の中心を、 origin-top で変更する

  • overflow-hidden で、はみ出た部分を隠す

といった所でしょうか。

ラベルの色など、お好みで変えてみてください!

この記事をシェアしよう!