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

[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;
}