Código Fácil: Dar formas a un div con css

Ahora que se acerca este 14 de febrero que te pareceria poner un div en forma de corazón en tu página, o si eres gammer que te pareceria un pacman, claro estarás pensando fácil con imagen, pues no aca te comparto una página en donde te darán el código de css para que le des formas a tus divs sin necesidad de imagenes, desde el más básico cuadrado perfecto hasta el símbolo del ying-yang.

Es tan fácil como poner el código en tu hoja de estilo y darle el id a tu div y listo.

Aqui te dejo el código para hacer las formas del corazon del pacman y de un triángulo Para ver todas las formas posibles visita:

http://css-tricks.com/examples/ShapesOfCSS/


<html lang="en">
<head>
    <title>Formas con divs y css</title>

    <style>

        #heart { position: relative; width: 100px; height: 90px; }

        #heart:before, #heart:after {

            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            -moz-border-radius: 50px 50px 0 0; 
            border-radius: 50px 50px 0 0;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            -o-transform: rotate(-45deg); transform: rotate(-45deg);
            -webkit-transform-origin: 0 100%;
            -moz-transform-origin: 0 100%;
            -ms-transform-origin: 0 100%;
            -o-transform-origin: 0 100%;
            transform-origin: 0 100%; }
     
        #heart:after {
            left: 0;
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
            -webkit-transform-origin: 100% 100%;
            -moz-transform-origin: 100% 100%;
            -ms-transform-origin: 100% 100%;
            -o-transform-origin: 100% 100%;
            transform-origin :100% 100%;
        }
       
        #pacman {
            width: 0px;
            height: 0px;
            border-right: 60px solid transparent;
            border-top: 60px solid yellow;
            border-left: 60px solid yellow;
            border-bottom: 60px solid yellow;
            border-top-left-radius: 60px;
            border-top-right-radius: 60px;
            border-bottom-left-radius: 60px;
            border-bottom-right-radius: 60px; }
       
        #triangle-up {
            width: 0;
            height: 0;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 100px solid blue;
            }

    </style>
      
</head>

<body>

   <div id="heart"></div>

   <div id="pacman"></div>

   <div id="triangle-up"></div>
 
</body>

</html>

"Programar no tiene que ser tan difícil como parece...."

Código Fácil

Páginas

jueves, 31 de enero de 2013

Dar formas a un div con css

No hay comentarios:

Publicar un comentario

Seguidores