Formas básicas
Empieza por círculos, triángulos y cápsulas.
1
Un círculo es una caja cuadrada con border-radius: 50%.
2
El triángulo clásico se genera con bordes cuando ancho y alto son 0.
3
Combinando transformaciones y gradientes puedes crear resultados sorprendentes con poco código.
Círculo y triángulo
.dot { width: 80px; aspect-ratio: 1; border-radius: 50%; background: #2563eb; }
.arrow { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 20px solid #0f172a; }