1- Formas básicas con width, height, border y border-radius
Cuadrados / rectángulos:

html
<div class="box"></div>

<style>
.box {
    width: 120px;
    height: 80px;
    background: #38bdf8;
}
</style>

Círculos:

html
<div class="circle"></div>

<style>
.circle {
    width: 80px;
    height: 80px;
    background: #22c55e;
    border-radius: 50%;
}
</style>

Triángulos (solo con bordes):

html
<div class="triangle"></div>

<style>
.triangle {
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid #f97316;
}
</style>

2. Pseudo-elementos ::before y ::after (capas extra)
Sirven para añadir “piezas” sin más HTML: sombras, detalles, iconos, decoraciones.

html
<div class="badge">Perfil</div>

<style>
.badge {
    position: relative;
    padding: 12px 24px;
    background: #0f172a;
    color: #e5e7eb;
    border-radius: 999px;
}
.badge::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    transform: translateY(-50%);
}
</style>

Ahí ya estás “dibujando” un punto de estado dentro del mismo componente.

3. clip-path y formas complejas
clip-path permite recortar un elemento con polígonos, círculos, etc.

html
<div class="ribbon">Destacado</div>

<style>
.ribbon {
    padding: 12px 32px;
    background: #ec4899;
    color: white;
    clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}
</style>

Eso ya es casi “ilustración vectorial” hecha con CSS.

4. Gradientes como pintura (linear-gradient, radial-gradient)
Con gradientes puedes simular volúmenes, luces, fondos ilustrados:

html
<div class="card"></div>

<style>
.card {
    width: 220px;
    height: 140px;
    border-radius: 18px;
    background: linear-gradient(135deg, #1d4ed8, #22c55e);
}
</style>

Si añades pseudo-elementos encima, tienes composiciones bastante ricas sin imágenes.

5. Transformaciones y animaciones (transform, transition, @keyframes)
Lo que ya hemos usado en tus botones: escalado, desplazamiento, rotación.

html
<div class="pulse"></div>

<style>
.pulse {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #22c55e;
    animation: pulse 1.4s infinite;
}
@keyframes pulse {
    0%   { transform: scale(1);   opacity: 1; }
    100% { transform: scale(1.6); opacity: 0; }
}
</style>

Eso es literalmente “dibujar y animar” con CSS.

6. Cuándo usar CSS, cuándo pensar en SVG/canvas
CSS puro:
Ideal para lo que estás haciendo ahora:

Botones, etiquetas, cintas, badges.
Iconos simples, decoraciones, fondos.
Elementos que deben ser responsivos y fáciles de modificar.

SVG / canvas:
Mejor cuando:

Hay ilustraciones muy complejas.
Necesitas precisión geométrica avanzada.
Requieres interacción gráfica más sofisticada.