コピペでできる!cssとhtmlだけ[clip-path]で作るコーナーにつけるシンプルなリボンデザイン4種

CSS HTML
 

ECサイトなどでよくつかうセールやポイントとしてブロック(商品や画像など)の四隅につけるリボン。
こちらではそれぞれ右上下・左上下の四隅につけるシンプルなデザインをご紹介。

browser:  ✔︎ ✔︎ ✔︎ 

[clip-path]で作るコーナーにつけるシンプルなリボン[4種]

右上に巻かれたリボン

ニャン易度
images
Ribbon
<div class="cp_card">
コンテンツ
  <div class="cp_ribbon01_2">
    <div class="cp_ribbon">Ribbon</div>
  </div>
</div>
.cp_card {
  position: relative;/*リボンをかけたいコンテンツボックスにセット*/
  width: 300px;
  height: 300px;
  background: #ffffff;
  margin: auto;
  padding: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/*リボンの部分*/
.cp_ribbon01_2 .cp_ribbon {
  position: absolute;
  top: 25px;
  right: -40px;
  width: 160px;
  height: 30px;
  background-color: #2196F3;
  color: #ffffff;
  text-align: center;
  line-height: 1.8;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  transform: rotate(45deg);
}
/*リボンの影の部分*/
.cp_ribbon01_2::before,
.cp_ribbon01_2::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background-color: #1565C0;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}
.cp_ribbon01_2:before {
  top: -6px;
  right: 101px;
}
.cp_ribbon01_2:after {
  top: 101px;
  right: -6px;
}

左上に巻かれたリボン

ニャン易度
images
Ribbon
<div class="cp_card">
コンテンツ
  <div class="cp_ribbon02_2">
    <div class="cp_ribbon">Ribbon</div>
  </div>
</div>
.cp_card {
  position: relative;/*リボンをかけたいコンテンツボックスにセット*/
  width: 300px;
  height: 300px;
  background: #ffffff;
  margin: auto;
  padding: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/*リボンの部分*/
.cp_ribbon02_2 .cp_ribbon {
  position: absolute;
  top: 25px;
  left: -40px;
  width: 160px;
  height: 30px;
  background-color: #FF9800;
  color: #ffffff;
  text-align: center;
  line-height: 1.8;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  transform: rotate(-45deg);
}
/*リボンの影の部分*/
.cp_ribbon02_2::before,
.cp_ribbon02_2::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background-color: #EF6C00;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.cp_ribbon02_2:before {
  top: -6px;
  left: 101px;
}
.cp_ribbon02_2:after {
  top: 101px;
  left: -6px;
}

右下に巻かれたリボン

ニャン易度
images
Ribbon
<div class="cp_card">
コンテンツ
  <div class="cp_ribbon03_2">
    <div class="cp_ribbon">Ribbon</div>
  </div>
</div>
.cp_card {
  position: relative;/*リボンをかけたいコンテンツボックスにセット*/
  width: 300px;
  height: 300px;
  background: #ffffff;
  margin: auto;
  padding: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/*リボンの部分*/
.cp_ribbon03_2 .cp_ribbon {
  position: absolute;
  bottom: 25px;
  right: -40px;
  width: 160px;
  height: 30px;
  background-color: #009688;
  color: #ffffff;
  text-align: center;
  line-height: 1.8;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  transform: rotate(-45deg);
}
/*リボンの影の部分*/
.cp_ribbon03_2::before,
.cp_ribbon03_2::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background-color: #00695C;
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}
.cp_ribbon03_2:before {
  bottom: -6px;
  right: 101px;
}
.cp_ribbon03_2:after {
  bottom: 101px;
  right: -6px;
}

左下に巻かれたリボン

ニャン易度
images
Ribbon
<div class="cp_card">
コンテンツ
  <div class="cp_ribbon04_2">
    <div class="cp_ribbon">Ribbon</div>
  </div>
</div>
.cp_card {
  position: relative;/*リボンをかけたいコンテンツボックスにセット*/
  width: 300px;
  height: 300px;
  background: #ffffff;
  margin: auto;
  padding: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
/*リボンの部分*/
.cp_ribbon04_2 .cp_ribbon {
  position: absolute;
  bottom: 25px;
  left: -40px;
  width: 160px;
  height: 30px;
  background-color: #9C27B0;
  color: #ffffff;
  text-align: center;
  line-height: 1.8;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  transform: rotate(45deg);
}
/*リボンの影の部分*/
.cp_ribbon04_2::before,
.cp_ribbon04_2::after {
  position: absolute;
  content: '';
  width: 6px;
  height: 6px;
  background-color: #6A1B9A;
  clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.cp_ribbon04_2:before {
  bottom: -6px;
  left: 101px;
}
.cp_ribbon04_2:after {
  bottom: 101px;
  left: -6px;
}

いろんな種類のリボンがみたい!

copypet.jp

コピペでできる!cssとhtmlだけのブロックの一部につけるリボンデザイン8種 | copypet.jp|パーツで探す、web制作に使えるコピペサイト。

ECサイトなどでよくつかうセールやポイントとしてブロック(商品や画像など)につけるリボン。 こちらではステッチ付きやブロック上部の全体をおおう大きなリボンタイプなどをご用意。…

copypet.jp

記事を見る

[clip-path]を使っていないバージョン

コピペでできる!cssとhtmlだけのコーナーにつけるシンプルなリボンデザイン4種 - コピペっと copypet.jp|パーツで探す、web制作に使えるコピペサイト。

コピペでできる!cssとhtmlだけのコーナーにつけるシンプルなリボンデザイン4種 - コピペっと copypet.jp|パーツで探す、web制作に使えるコピペサイト。

ECサイトなどでよくつかうセールやポイントとしてブロック(商品や画像など)の四隅につけるリボン。 こちらではそれぞれ右上下・左上下の四隅につけるシンプルなデザインをご紹介。……

記事を見る

copypet.jp

CSS3などで新たに追加された要素・装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか?