Creación de bordes irregulares de estilo de Google + con CSS puro
| Autor: | SomeStuffer |
|---|---|
| Views Total: | 4,194 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 1, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Bordes dentados basados en CSS/CSS3 puros para sus contenedores como se ve en el sitio web de Google Plus.
Funcionamiento
Cree un elemento para el borde irregular.
<div class="demo jagged-border"></div>
El CSS requerido para aplicar el borde dentado al elemento que acaba de crear.
.jagged-border {
position: relative;
width: 100%;
height: 50px;
-webkit-filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 1px 2px);
}
.jagged-border:before {
content: "";
display: block;
position: absolute;
top: -10px;
width: 100%;
height: 10px;
} Opcionalmente, puede Agregar estilos propios al borde irregular.
.demo { background: #ECF0F1; }
.demo {
background: -webkit-linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
background: linear-gradient(45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, #ecf0f1 33.333%, #ecf0f1 66.667%, transparent 66.667%);
-webkit-background-size: 20px 40px;
background-size: 20px 40px;
}
