Как сделать треугольник на css?

body {
  background: #5cc3ff;
  overflow: hidden;
}

.triangle {
  --size: 100px;
  position: absolute;
  transform-origin: 50% 55.175%;
}

.inner {
  clip-path: url(#svgPath);
  width: var(--size);
  height: var(--size);
}

.tri-white {
  --size: 200px;
  left: 100px;
  animation: rotation 5s infinite linear;
}

.tri-white .inner {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(4px);
}

.tri-gradient {
  --size: 150px;
  top: 25px;
  left: 200px;
  filter: drop-shadow(0 6px 7px #2774ff);
}

.tri-gradient .inner {
  background: #f2d1ff;
  background: radial-gradient(circle farthest-corner at right center, #f2d1ff 0%, #5bc1ff 40%, #2774ff 80%);
}

@keyframes rotation {
  to { transform: rotate(360deg); }
}

<div class="triangle tri-gradient">
  <div class="inner">
  </div>
</div>

<div class="triangle tri-white">
  <div class="inner">
  </div>
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="svgPath" clipPathUnits="objectBoundingBox">
      <path d="M 0.9776 0.6674 l -0.3389 -0.587 c -0.0294 -0.0509 -0.0799 -0.08 -0.1387 -0.08 c -0.0588 0 -0.1093 0.0291 -0.1387 0.08 l -0.3389 0.587 c -0.0294 0.0509 -0.0294 0.1092 -0 0.1601 c 0.0294 0.0509 0.0799 0.08 0.1387 0.08 l 0.6778 0 c 0.0588 0 0.1093 -0.0291 0.1387 -0.08 c 0.0294 -0.0509 0.0294 -0.1092 -0 -0.1601 z"/>
    </clipPath>
  </defs>
</svg>