CSSで斜め掛けリボンをつくる

2024.09.13 09:00
2024.09.09 12:59
CSSで斜め掛けリボンをつくる

NEWなどを表示する斜め掛けリボンをCSSで作ってみました。

デモはこちら

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" media="all" href="style.css" />
  <title></title>
</head>
<body>

  <div class="box">
    <div class="inner">
      <div class="ribbon">NEW</div>
      <p>
        内容をここに入れます。内容をここに入れます。内容をここに入れます。
        内容をここに入れます。内容をここに入れます。内容をここに入れます。
        内容をここに入れます。内容をここに入れます。内容をここに入れます。
      </p>    
    </div>
  </div>

</body>
</html>


.box {
  overflow: hidden;
  padding: 1px;
}
.inner {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 20px 40px;
  position: relative;
}
.ribbon {
  font-size: .6rem;
  font-weight: bold;
  color: #fff;
  position: absolute;
  top: -2px;
  left: -2px;
  line-height: 1.8;
  box-shadow: 0 0 4px rgba(100, 100, 100, .2);
  padding-inline: 1.3lh;
  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((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
  background-color: #cc0000;
}

こんな感じです！
一見めんどくさそうですが、コピペしてしまえばOKですね。

今回は以上です！