Creación de tiras de correo aéreo sin fisuras con CSS puro
| Autor: | thetwistedtaste |
|---|---|
| Views Total: | 3,658 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 11, 2014 |
| Licencia: | MIT |
Vista prévia
Descripción
Un poco de CSS/CSS3 hecho por < a href = "https://Codepen.io/thetwistedsabor/pen/lcpvm" target = "_ blank" rel = "noopener" > thetwistedtaste para agregar tiras de correo aéreo sin fisuras a los bordes de su contenedor. No se necesitan imágenes. Se utiliza comúnmente para el patrón de borde de su caja de suscripción para captar la atención de su visitante.
Funcionamiento
Cree un elemento interno dentro de un elemento primario con la clase CSS de ' container '.
<div class="container"> <div class="inner"> your subscription box</div> </div>
El CSS para crear tiras de correo aéreo sin fisuras alrededor del elemento ' interior '. Utilice la propiedad padding para especificar el alto/grosor de las franjas. Hecho por thetwistedtaste.
.container {
width: 300px;
height: 200px;
margin:0 auto;
background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);
padding: 12px;
}
.container .inner {
background: white;
width: 100%;
height: 100%;
}
