CSSジェネレーターを使ってリボンデザインを簡単に実装する #generator

概要

ウェブサイトにおいて、リボンデザインはユーザーの注目を引きやすく、特定の情報やプロモーションを際立たせる効果的な手法です。この記事では、CSS Generatorsを使って、簡単にリボンデザインをウェブサイトに追加する方法をご紹介します。CSS Generatorsから好みのリボンを選択しribbonクラスのスタイルとしてコピー＆ペーストするだけで、ウェブサイトにリボンを簡単に追加できます。例えば、#1~2はリボンのみを実装し、#3~6はボックスに対してリボンを実装します。

実装例

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/tutorial.css" />
    <title>Front Tips - CSS Ribon Shapes Collection</title>
  </head>
  <body>
    <div class="box">
      <div class="ribbon">
        <b>Front Tips</b>
      </div>
    </div>
  </body>
</html>

css/reset.css

:root {
  --background-color: #181824;
  --text-color: #fff;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
  font: 200 145%/1.5 Verdana, sans-serif;
  font-family: system-ui, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 2rem;
  margin: auto;
  color: var(--text-color);
  background-color: var(--background-color);
  cursor: default;
}

.box {
  position: relative;
  width: 400px;
  height: 300px;
  margin: 2rem;
  font-size: 2rem;
  font-weight: bold;
  background: #383854;
  border-radius: 1rem;
  place-self: initial;
  grid-area: 1/1;
}

css/tutorial.css

/* Made by https://css-generators.com/ribbon-shapes/ */
.ribbon {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: 0.5em; /* control the folded part */

  position: absolute;
  top: 0;
  right: 0;
  line-height: 1.8;
  padding-inline: 1lh;
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51% / var(--f);
  clip-path: polygon(
    100% calc(100% - var(--f)),
    100% 100%,
    calc(100% - var(--f)) calc(100% - var(--f)),
    var(--f) calc(100% - var(--f)),
    0 100%,
    0 calc(100% - var(--f)),
    999px calc(100% - var(--f) - 999px),
    calc(100% - 999px) calc(100% - var(--f) - 999px)
  );
  transform: translate(calc((1 - cos(45deg)) * 100%), -100%) rotate(45deg);
  transform-origin: 0% 100%;
  background-color: #bd1550; /* the main color  */
}

参照

Front Tipsはフロントエンド開発のこんな手法あったんだという情報を知れます。
自らの備忘録のために投稿してますが、なにかお役に立てましたら幸いです！
また、なにか間違ってましたらご指摘いただけますと幸いです！