Código de CSS - Separador en forma de sierra con CSS

Pos: 5

Val: 493

Ha mantenido su posición en CSS (en relación al último mes)

Separador en forma de sierra con CSS

CSS

Publicado el 28 de Marzo del 2021 por Katas (47 códigos)

2.850 visualizaciones desde el 28 de Marzo del 2021

Este estilo utiliza una forma SVG para separar dos bloques diferentes para crear una apariencia visual más interesante en comparación con la separación horizontal estándar.

css-separador

background-image: url (...) agrega la forma SVG (un triángulo de 24x12) como imagen de fondo del pseudo elemento, que se repite por defecto

1

Publicado el 28 de Marzo del 2021

gráfica de visualizaciones de la versión: 1

2.851 visualizaciones desde el 28 de Marzo del 2021

<!DOCTYPE html>

<html>

<head>

    <style>

    .shape-separator {

        position: relative;

        height: 48px;

        background: #333;

    .shape-separator::after {

        content: '';

        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='%23fff'/%3E%3C/svg%3E");

        position: absolute;

        width: 100%;

        height: 12px;

        bottom: 0;

    </style>

</head>

<body>

    <div class="shape-separator"></div>

</body>

</html>

Comentarios sobre la versión: 1 (0)

No hay comentarios

Comentar la versión: 1

http://lwp-l.com/s6980

Tags:
separador

Animación

Poner un texto en forma trapezoidal con CSS3

Código de CSS - Separador en forma de sierra con CSS

1

Comentarios sobre la versión: 1 (0)

Comentar la versión: 1

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.