📝 代码查看
使用runcode.html页面

1
查看次数
2025-11-07
创建时间
2025-11-07
最后更新
<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/alphardex/aqua.css/dist/aqua.min.css'><div class="ribbon">
  <div class="body">Pure CSS Ribbon</div>
  <div class="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
  </div>
</div>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background: hsl(240, 56%, 98%);
}

:root {
  --yellow-color-1: #f9bb00;
  --yellow-color-2: #ef7e06;
  --yellow-color-3: #f7ac00;
}

.ribbon {
  --ribbon-color-1: var(--yellow-color-1);
  --ribbon-color-2: var(--yellow-color-2);
  --ribbon-color-3: var(--yellow-color-3);

  position: relative;

  .body {
    padding: 0.5rem 1rem;
    color: white;
    white-space: nowrap;
    background: var(--ribbon-color-1);
  }

  .block {
    &:nth-child(1),
    &:nth-child(2) {
      position: absolute;
      z-index: 1;
      bottom: -20%;
      width: 2rem;
      height: 20%;
      background: var(--ribbon-color-2);
      clip-path: polygon(0 0, 100% 100%, 100% 0);
    }

    &:nth-child(1) {
      left: 0;
    }

    &:nth-child(2) {
      right: 0;
      transform: scaleX(-1);
    }

    &:nth-child(3),
    &:nth-child(4) {
      position: absolute;
      z-index: -1;
      top: 20%;
      width: 4rem;
      height: 100%;
      background: var(--ribbon-color-3);
      clip-path: polygon(0 0, 25% 50%, 0 100%, 100% 100%, 100% 0);
    }

    &:nth-child(3) {
      left: -2rem;
    }

    &:nth-child(4) {
      right: -2rem;
      transform: scaleX(-1);
    }
  }
}
暂无JavaScript代码

👁️ 实时预览