Curiosidades con CSS

Un cuadrado, dividido en cuatro partes
<div style="border-bottom: 50px solid lightblue; border-left: 50px solid red; border-right: 50px solid green; border-top: 50px solid yellow; height: 0;width: 0;"> </div>
Un triángulo.
<div style="border-bottom: 50px solid yellow; border-left: 30px solid #101921; border-right: 30px solid #101921; margin-bottom: 30px; width: 0;"> </div>
Un moño
<div style="border: 30px solid salmon; border-bottom: 15px solid #101921; border-top: 15px solid #101921; height: 0; width: 0;"> </div>

Una flecha.
Hacia allá
<style>
.right_arrow {position: relative; height: 50px; width: 250px;}
.right_arrow .body {background-color: SteelBlue; color:#FFF; line-height: 50px; text-align: center; height: 50px; width:100px;}
.right_arrow .arrow {border: 25px solid #101921; border-left: 10px solid SteelBlue; position:absolute; left:100px; top: 0; height: 0;}
</style>

<div class="right_arrow"><div class="body"> ... texto ... </div><div class="arrow"></div></div>
Y otra flecha.
Hacia el otro lado
<style>
.left_arrow {position: relative;}
.left_arrow .arrow {border: 25px solid #101921; border-right: 25px solid #CC0000; margin-left: -25px; overflow: hidden; width:0; height:0;}
.left_arrow .body {background-color: #CC0000; color: white; margin: -35px 0 0 25px; left:25px; text-align: center; top:15px; height:20px;}
</style>

<div class="left_arrow"><div class="arrow"></div><div class="body"> ... texto ... </div></div>

REFERENCIAS:Cult-f.net

0 comentarios:

Publicar un comentario