CSS Triangle Arrow DIVs
Una característica sutil de CSS que se ha aprovechado para hacer algo interesante es emplear su uso para crear puros triángulos CSS. Estos triángulos tienen la ventaja de ser muy ligero (sin utilización de imágenes).
La técnica funciona sabiendo el hecho de que los 4 bordes CSS de un elemento se encuentran en un ángulo, y cuando las dimensiones del elemento se establece en 0, el colapso de las fronteras y 4 se tocan, creando la apariencia de los 4 triángulos, podiendo hacer contenedores como los siguientes:
Para implementar, por ejemplo, el primer contenedor tendremos que desarrollar lo siguiente en CSS:
.uparrowdiv {
width:600px;
min-height:40px; /*min height of DIV should be set to at least 2x the width of the arrow*/
background: black;
color:white;
padding:5px;
position:relative;
word-wrap:break-word;
-moz-border-radius:5px; /*add some nice CSS3 round corners*/
-webkit-border-radius:5px;
border-radius:5px;
margin-bottom:2em;
}
.uparrowdiv:after{ /*arrow added to uparrowdiv DIV*/
content:'';
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent black transparent; /*border color should be same as div div background color*/
border-style: solid;
border-width: 10px;
}
Y en el <body> de nuestra página, el contenedor:
<div class="uparrowdiv">This is a test</div>
Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
¿Buscas trabajo de programador?
2 respuestas a “CSS Triangle Arrow DIVs”
Deja una respuesta
73 artículos que te podrían interesar
Ver más sobre
Excelente.
Usando tu ejemplo le sume a los cuadros que ya tenía la class .arrow-up
y el css
.arrow-up{
margin-left:-5px;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #d9edf7;
}
.arrow-up:after{ /*arrow added to uparrowdiv DIV*/
content:»;
display:block;
position:absolute;
top:-20px; /*should be set to -border-width x 2 */
left:30px;
width:0;
height:0;
border-color: transparent transparent white transparent;
border-style: solid;
border-width: 10px;
}
y quedo muy bien. gracias
Hola, lo podríamos ver en alguna página web?
Gracias por esta aportación
Saludos