Back to CSS Badges Origami Craft Endorsement Pure CSS
Share
HTML
<div class="ori-stage">
  <div class="ori-badge">
    <svg class="ori-medal" viewBox="0 0 220 300" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <ellipse cx="110" cy="288" rx="68" ry="6" fill="#5a4220" opacity="0.22"/>
      <g>
        <polygon points="80,190 80,260 110,250 110,200" fill="#3d5a6c"/>
        <polygon points="80,260 95,280 110,250" fill="#284252"/>
        <polygon points="110,200 110,250 140,260 140,190" fill="#2a4252"/>
        <polygon points="140,260 125,280 110,250" fill="#1a3242"/>
      </g>
      <polygon class="ori-fold ori-fold-light"  points="110,30 200,82 110,118" fill="#fbe6b0"/>
      <polygon class="ori-fold"                 points="200,82 192,196 110,118" fill="#e8c878"/>
      <polygon class="ori-fold ori-fold-shadow" points="192,196 110,222 110,118" fill="#c8a050"/>
      <polygon class="ori-fold ori-fold-shadow" points="110,222 28,196 110,118" fill="#b8923e"/>
      <polygon class="ori-fold"                 points="28,196 20,82 110,118" fill="#dab866"/>
      <polygon class="ori-fold ori-fold-light"  points="20,82 110,30 110,118" fill="#f4d894"/>
      <line x1="110" y1="30" x2="110" y2="222" stroke="#7a5824" stroke-width="0.4" opacity="0.3"/>
      <line x1="20" y1="82" x2="200" y2="82" stroke="#7a5824" stroke-width="0.4" opacity="0.25"/>
      <line x1="28" y1="196" x2="192" y2="196" stroke="#7a5824" stroke-width="0.4" opacity="0.25"/>
      <polygon points="110,30 200,82 192,196 110,222 28,196 20,82" fill="none" stroke="#fae0a0" stroke-width="0.6" opacity="0.5"/>
      <circle cx="110" cy="118" r="22" fill="#6a4a20" opacity="0.9"/>
      <circle cx="110" cy="118" r="20" fill="none" stroke="#fae0a0" stroke-width="0.6" opacity="0.6"/>
      <text x="110" y="127" text-anchor="middle" font-family="Marcellus, Georgia, serif" font-size="22" fill="#fae0a0" font-weight="400">M</text>
    </svg>
  </div>
  <div class="ori-label">
    <div class="ori-tier">— Master Class —</div>
    <div class="ori-skill">Letterpress &amp; Bindery</div>
    <div class="ori-cert">N° 0247 · Awarded May 2026</div>
  </div>
</div>
CSS
.ori-stage {
  background: linear-gradient(170deg, #eee8d4 0%, #d8d0b8 100%);
  padding: 60px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
  min-height: 460px;
}
.ori-badge {
  position: relative;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ori-badge:hover {
  transform: rotateY(14deg) rotateX(-6deg);
}
@media (prefers-reduced-motion: reduce) {
  .ori-badge { transition: none; }
}
.ori-medal {
  width: 220px;
  height: 300px;
  display: block;
  filter: drop-shadow(8px 18px 14px rgba(80,60,20,0.25));
}
.ori-medal .ori-fold { transition: filter 0.4s; }
.ori-badge:hover .ori-medal .ori-fold-light  { filter: brightness(1.12); }
.ori-badge:hover .ori-medal .ori-fold-shadow { filter: brightness(0.92); }
.ori-label {
  text-align: center;
}
.ori-tier {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.42em;
  color: #6a4a20;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ori-skill {
  font-family: "Marcellus", Georgia, serif;
  font-size: 26px;
  color: #3a2814;
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.ori-cert {
  font-family: system-ui, "Bricolage Grotesque", sans-serif;
  font-size: 9px;
  letter-spacing: 0.22em;
  color: #8a6630;
  text-transform: uppercase;
}