Rotating Triangle Trio

Three triangle items rotate together in a trio formation. Hover any triangle to lift it forward. The whole group rotates slowly on idle for visual interest.

Pure CSS MIT licensed

Rotating Triangle Trio the 15th of 21 designs in the 21 CSS Circular & Radial Menu Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<div class="ccm-tri">
  <div class="ccm-tri-grp">
    <a href="#" class="ccm-tri-i" style="--a: -90deg">A</a>
    <a href="#" class="ccm-tri-i" style="--a: 30deg">B</a>
    <a href="#" class="ccm-tri-i" style="--a: 150deg">C</a>
  </div>
  <span class="ccm-tri-c" aria-hidden="true">◯</span>
</div>

.ccm-tri {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ccm-tri-grp {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ccm-tri-spin 16s linear infinite;
}

.ccm-tri-i {
  position: absolute;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff6c8a, #f5a84a);
  color: #fff;
  font:
    700 14px/1 system-ui,
    sans-serif;
  text-decoration: none;
  clip-path: polygon(50% 5%, 95% 95%, 5% 95%);
  transform: rotate(var(--a)) translate(60px);
  transition: transform 0.3s;
}

.ccm-tri-i:hover {
  transform: rotate(var(--a)) translate(60px) scale(1.2);
  filter: drop-shadow(0 4px 12px rgba(255, 108, 138, 0.5));
  z-index: 2;
}

.ccm-tri-c {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1f1f2e;
  border: 2px solid #7c6cff;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .ccm-holo-rim,
  .ccm-snow-flakes,
  .ccm-orbit-sat,
  .ccm-orbit-i,
  .ccm-solar-o,
  .ccm-solar-o a,
  .ccm-tri-grp,
  .ccm-vinyl-disc,
  .ccm-bh-disk,
  .ccm-neb-cloud,
  .ccm-neb-i {
    animation: none !important;
  }
}

@keyframes ccm-tri-spin { to { transform: rotate(360deg); } }

More from 21 CSS Circular & Radial Menu Designs

Chronometer Nebula Cloud Mission Hub Service Orbit Tactile Dial Fan Reveal Petal Fan Full Circle Wheel Pie Slice Selector Donut Sectors Half-Donut Speed Dial Glass Dome

View the full collection →