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