SVG / Secciones

Separador de formas SVG: bordes y capas de secciones

Genera ocho formas SVG para separar secciones, con amplitud, frecuencia, altura, volteos, relleno invertido y hasta tres capas. Previsualiza la sección y copia el SVG, el CSS y el HTML.

Separador de formas SVG: bordes y capas de secciones: Elige un borde con forma de onda, curva, inclinación, triángulo, flecha, zigzag, nube o montaña; ajusta su altura, amplitud y repeticiones; voltéalo o inviértelo, y apila hasta tres capas. El separador se adapta a cualquier ancho de página. Copia el SVG, el CSS de posicionamiento o una sección HTML lista para usar. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría: Herramientas de desarrollo
Se ejecuta: En tu navegador
Coste: Gratis · sin registro
Disponibilidad: Lista para usar

Separador de formas SVGProcesamiento local

Funciona por completo en tu navegador

Vista previa de la sección

Un cambio de escenario.

Un borde con forma entre dos secciones.

Código SVG

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

Posicionamiento CSS

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

Sección HTML

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Usa el color de fondo de la sección siguiente para crear un borde continuo. Voltea verticalmente al mover un separador inferior a la parte superior.

Trazados cerrados y coordenadas

SVG 2 define los comandos de trazado closepath y cúbico: https://www.w3.org/TR/SVG2/paths.html . viewBox asigna estas coordenadas al área de visualización: https://www.w3.org/TR/SVG2/coords.html

Origen de las formas

La forma de onda utiliza las mismas curvas suaves que SVG Wave Generator y SVG Blob Generator; los demás perfiles se dibujan a partir de fórmulas sencillas. No se incluye ninguna imagen de terceros, por lo que puedes utilizar el resultado libremente.

Cómo se usa

Elige una forma y ajusta su amplitud, frecuencia y altura.
Configura las capas, la opacidad y el color; después selecciona el borde de la sección y los volteos que quieras aplicar.
Copia el SVG, el CSS de posicionamiento y el HTML de la sección, o descarga el SVG.

Privacidad y límites

La generación de formas y las descargas se ejecutan íntegramente en tu navegador.

Herramientas relacionadas

Preguntas frecuentes

¿Cómo hago que el borde se integre con otra sección?

Usa como relleno del separador el color de fondo de esa sección. El CSS reserva espacio para el separador y lo coloca de forma absoluta en el borde seleccionado.

¿En qué se diferencia del generador de ondas?

Esta herramienta añade otras siete formas, inversión y HTML de sección. El Generador de ondas SVG existente ofrece ondas aleatorias y controles adicionales específicos para ondas. El Generador de formas orgánicas SVG crea formas orgánicas independientes.

¿Qué hace la opción de invertir?

Invertir cierra el trazado hacia la parte superior en lugar de hacia la inferior. El borde divisorio permanece en su sitio. Voltear verticalmente refleja toda la forma.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta