100+個CSS絲帶集合，你確定不來看一看嗎？

作者：前端新世界 2024-03-07 08:22:32

只需單擊一下即可復(fù)制絲帶的CSS代碼，無論是經(jīng)典的絲帶，還是新式的、花哨的，總有一款讓你眼前一亮。你還在等什么？一起來看看吧。

今天我們要介紹100多個使用單個元素制作的CSS絲帶。是的，只用到一個元素。

這可不是用舊的和過時的代碼制作的CSS絲帶，而是用現(xiàn)代CSS制作的，并對CSS變量進(jìn)行了優(yōu)化。沒有幻數(shù)也沒有固定尺寸。隨你所愿可以將所有絲帶放置于任何內(nèi)容之中，通過調(diào)整變量即可輕松控制。

只需單擊一下即可復(fù)制絲帶的CSS代碼，無論是經(jīng)典的絲帶，還是新式的、花哨的，總有一款讓你眼前一亮。

你還在等什么？一起來看看吧。

多行絲帶

當(dāng)當(dāng)當(dāng)當(dāng)，我可是我的最愛。創(chuàng)建適合多行文本的絲帶是有挑戰(zhàn)性的，但也難不倒我。

圖片

代碼示例1

.ribbon {
  --r: .5em;  /* control the cutout of the ribbon */
  --c: #d81a14;
  
  padding-inline: calc(.5em + var(--r));
  text-align: center;
  line-height: 2;
  color: #fff;
  background-image: 
    linear-gradient(var(--c) 70%,#0000 0), 
    linear-gradient(to bottom left,#0000 50%, color-mix(in srgb,var(--c),#000 40%) 51% 84%,#0000 85%);
  background-position: 0 .15lh;
  background-size: 100% 1lh;
  clip-path: polygon(0 .15lh,100% .15lh,calc(100% - var(--r)) .5lh,100% .85lh,100% calc(100% - .15lh),0 calc(100% - .15lh),var(--r) calc(100% - .5lh),0 calc(100% - .85lh));
  /* width: fit-content; you may need this in your real use case */
  outline: none;
}

/* if you update the line-height, you need to also update the below */
@supports not (height:1lh) {
  .ribbon {
    background-position: 0 .3em;
    background-size: 100% 2em;    
    clip-path: polygon(0 .3em,100% .3em,calc(100% - var(--r)) 1em,100% 1.7em,100% calc(100% - .3em),0 calc(100% - .3em),var(--r) calc(100% - 1em),0 calc(100% - 1.7em))
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 20px;
  background: #f2f2f2;
}

/* due to precise values you have to choose good font-size values to avoid rounding issues and visual glitchs */
h1,h2,h3 {
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 3rem;
  margin: 0;
}

<h1 class="ribbon" contenteditable>Click to edit</h1>

示例1演示如下

圖片

編輯文本我們可以看到絲帶將自動調(diào)整以適應(yīng)內(nèi)容。

代碼示例2

.ribbon {
  --r: .5em;  /* control the cutout of the ribbon */
  --a: 20deg; /* control the angle of the folded part */
  --w: 5em;   /* control the width of the folded part  */
  --c: #d81a14;
  
  padding-inline: calc(1lh*tan(var(--a)/2) + .3em);
  margin-block: calc(var(--w)*sin(var(--a)));
  text-align: center;
  color: #fff;
  line-height: 2;
  background-image: 
    linear-gradient(var(--c) 70%,#0000 0), 
    linear-gradient(to bottom left,#0000 50%, color-mix(in srgb,var(--c),#000 40%) 51% 84%,#0000 85%);
  background-position: 0 .15lh;
  background-size: 100% 1lh;
  position: relative;
  clip-path: polygon(
    0 .15lh,
    calc(100% - .7lh/sin(var(--a))) .15lh,
    calc(100% - .7lh/sin(var(--a)) - 999px) calc(.15lh - 999px*tan(var(--a))),
    100% -999px,
    100% .15lh,
    calc(100% - .7lh*tan(var(--a)/2)) .85lh,
    100% 1lh,
    100% calc(100% - .15lh),
    calc(.7lh/sin(var(--a))) calc(100% - .15lh),
    calc(.7lh/sin(var(--a)) + 999px) calc(100% - .15lh + 999px*tan(var(--a))),
    0 999px,
    0 calc(100% - .15lh),
    calc(.7lh*tan(var(--a)/2)) calc(100% - .85lh),
    0 calc(100% - 1lh)
   );
  /*width: fit-content; you may need this in your real use case */
  outline: none;
}
.ribbon:before,
.ribbon:after {
  content:"";
  position: absolute;
  height: .7lh;
  width: var(--w);
  background: color-mix(in srgb,var(--c),#000 40%);
  rotate: var(--a);
}
.ribbon:before {
  top: .15lh;
  right: 0;
  transform-origin: top right;
  clip-path: polygon(0 0,100% 0,calc(100% - .7lh/tan(var(--a))) 100%,0 100%, var(--r) 50%);
}
.ribbon:after {
  bottom: .15lh;
  left: 0;
  transform-origin: bottom left;
  clip-path: polygon(calc(.7lh/tan(var(--a))) 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
}

/* if you update the line-height, you need to also update the below */
@supports not (height:1lh) {
  .ribbon {
    padding-inline: calc(2em*tan(var(--a)/2) + .3em);
    background-position: 0 .3em;
    background-size: 100% 2em;
    clip-path: polygon(
      0 .3em,
      calc(100% - 1.4em/sin(var(--a))) .3em,
      calc(100% - 1.4em/sin(var(--a)) - 999px) calc(.3em - 999px*tan(var(--a))),
      100% -999px,
      100% .3em,
      calc(100% - 1.4em*tan(var(--a)/2)) 1.7em,
      100% 2em,
      100% calc(100% - .3em),
      calc(1.4em/sin(var(--a))) calc(100% - .3em),
      calc(1.4em/sin(var(--a)) + 999px) calc(100% - .3em + 999px*tan(var(--a))),
      0 999px,
      0 calc(100% - .3em),
      calc(1.4em*tan(var(--a)/2)) calc(100% - 1.7em),
      0 calc(100% - 2em)
     );
  }
  .ribbon:before,
  .ribbon:after {
    height: 1.4em;
  }
  .ribbon:before {
    top: .3em;
    clip-path: polygon(0 0,100% 0,calc(100% - 1.4em/tan(var(--a))) 100%,0 100%, var(--r) 50%);
  }
  .ribbon:after {
    bottom: .3em;
    clip-path: polygon(calc(1.4em/tan(var(--a))) 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  background: #f2f2f2;
  line-height: 2;
}

/* due to precise values you have to choose good font-size values to avoid rounding issues and visual glitches */
h1 {
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 3.5rem;
  margin: 0;
}

<h1 class="ribbon" contenteditable="true">Click to edit</h1>

示例2演示如下

彎曲的絲帶

將直線文本與彎曲的絲帶結(jié)合起來并不容易，但成品效果也很有意思。

無限絲帶

一直延伸的絲帶？讓我試著制作看看！這樣的絲帶可以向某個方向（頂部、底部、右側(cè)、左側(cè)）延伸直到屏幕的邊緣。

因?yàn)槭窃跊]有偽元素的情況下構(gòu)建的，所以不會產(chǎn)生任何溢出問題。請看下面的兩個演示：

代碼示例3

.ribbon {
  --r: .8em; /* control the cutout */
  --c: #bd1550;
  
  padding-inline: 1lh calc(var(--r) + .25em);
  border-image: conic-gradient(var(--c) 0 0) fill 0//9999px;
  outline: 9999px solid #0004;
  /* width: fit-content; you may need this in your real use case */
}
.top {
  clip-path: polygon(1lh 100%,100% 100%,calc(100% - var(--r)) 50%,100% 0,1lh 0,1lh -9999px,0 -9999px,0 0);
}
.bottom {
  clip-path: polygon(1lh 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1lh 100%,1lh 9999px,0 9999px,0 100%);
}
/* the 9999px is a very big value. Use what you want but make sure it's the same everywhere. If you use a small value you get another kind of ribbon without the infinite feature */


@supports not (height:1lh ) {
  .ribbon {
    padding-inline: 1.7em calc(var(--r) + .25em);
  }
  .top {
    clip-path: polygon(1.7em 100%,100% 100%,calc(100% - var(--r)) 50%,100% 0,1.7em 0,1.7em -9999px,0 -9999px,0 0);
  }
  .bottom {
    clip-path: polygon(1.7em 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,1.7em 100%,1.7em 9999px,0 9999px,0 100%);
  }
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  place-items: center;
  gap: 20px;
  background: #f2f2f2;
}

h2 {
  font-family: sans-serif;
  text-transform: uppercase;
  margin: 0;
  font-size: 2.5rem;
  line-height: 1.7;
  color: #fff;
}

<h2 class="ribbon top" >An infinite Ribbon</h2>
<h2 class="ribbon bottom" style="--c: #8A9B0F">An infinite Ribbon</h2>

示例3演示如下

圖片

代碼示例4

.ribbon {
  --c: #C7F464;
  
  border-image: 
     conic-gradient(from 45deg at calc(100% - 1lh),#0000 25%,var(--c) 0) 
     fill 0//0 0 0 100vw;
  padding-right: 1.3lh;
  line-height: 1.5em; /* control the height */ 
  width: fit-content; /* you probably don't need this if your element is already shrink-to-fit*/
}

@supports not (padding: 1lh) { /* in case the lh unit is not available fallback to em */
  .ribbon {
    border-image: 
       conic-gradient(from 45deg at calc(100% - 1.5em) 50%,#0000 25%,var(--c) 0) 
       fill 0//0 0 0 100vw;
    padding-right: 2em; 
  }
}

section {
  /* center + max-width:800px + min-margin: 10px */
  margin: 50px max(10px, 50% - 800px/2);
}
body {
  font-family: system-ui, sans-serif;
  background: #eee;
}
h1 {
  font-size: 3rem;
}
p {
  font-size: 1.5rem;
  text-align:justify;
}

<section>
  <h1 class="ribbon">Main title</h1>
  <p>Dragée powder bear claw tiramisu pudding gummi bears wafer. Macaroon chocolate cake cake marzipan icing carrot cake macaroon sweet. Lemon drops </p>
</section>
<section>
  <h2 class="ribbon" style="--c: #4ECDC4">Second title</h2>
  <p >Pie pastry macaroon candy tootsie roll jujubes pudding pie. Jelly-o chocolate cake pastry gingerbread brownie danish liquorice chocolate cake. Jelly beans donut cupcake danish croissant liquorice. Cotton candy brownie croissant pie toffee. Cotton candy chocolate cake gummi bears ice cream jelly fruitcake caramels. Shortbread ice cream bear claw gingerbread chocolate cake jelly-o cake caramels soufflé.</p>
</section>
<section>
  <h3  class="ribbon" style="--c: #542437; color: #fff;">Small title</h3>
  <p>Pie pastry macaroon candy tootsie roll jujubes pudding pie. gingerbread brownie danish liquorice chocolate cake. Jelly beans donut cupcake danish croissant liquorice.</p>
</section>

示例4演示如下

圖片