Diseño de figuras geométricas con css
Los <div> son objetos que colocamos en nuestro código para crear cajas de contenido, para maquetar, etc. Su forma predeterminada son rectangulares o cuadradas, dependiendo del ancho del <div>.
En este tema les voy a mostrar las diferentes formas que se le puede ajustar a un <div> mediante el uso del CSS y obtener figuras como triángulos o círculos y a partir de allí, conseguir otras formas.
<img src="http://imageshack.com/a/img819/343/22yr.png">
El círculo.
El círculo, no es difícil de hacer y es una buena manera para crear logos sin imágenes o botones circulares. Consiste en un width y un height de la misma medida (como un cuadro) y luego con la palabra de css, border-radius darle un borde redondo de 100 píxeles. Luego, colocarle un color de fondo y un relleno con padding.
Ahora, el que podría ser más complicado. El triángulo
De complicado no tiene mucho, la cuestión es entender que estamos haciendo para que nos sea fácil crearlo. Hay que saber interpretar el código. El triángulo consiste en un <div> de ancho y altura igual a 0, con tres bordes (Aunque un cuadrado tiene cuatro, el triángulo posee 3 donde el cuarto borde que no va se refiere al sentido de la punta del triángulo). Veamos un ejemplo del triángulo con punta hacia arriba.
Propiedades
Si le ponemos un width definido al triángulo, obtendremos un trapecio. Y con ésto, ya tenemos el conociemiento para formar tres figuras geométricas.
Trapecio
En este tema les voy a mostrar las diferentes formas que se le puede ajustar a un <div> mediante el uso del CSS y obtener figuras como triángulos o círculos y a partir de allí, conseguir otras formas.
<img src="http://imageshack.com/a/img819/343/22yr.png">
El círculo.
El círculo, no es difícil de hacer y es una buena manera para crear logos sin imágenes o botones circulares. Consiste en un width y un height de la misma medida (como un cuadro) y luego con la palabra de css, border-radius darle un borde redondo de 100 píxeles. Luego, colocarle un color de fondo y un relleno con padding.
<html>
<head>
<title>El circulo</title>
<style>
div.circulo {
width:70px;
height:70px
border-radius:100px;
background:#cccccc;
padding:20px;
}
</style>
</head>
<body>
<div class="circulo"></div>
</body>
</html>Ahora, el que podría ser más complicado. El triángulo
De complicado no tiene mucho, la cuestión es entender que estamos haciendo para que nos sea fácil crearlo. Hay que saber interpretar el código. El triángulo consiste en un <div> de ancho y altura igual a 0, con tres bordes (Aunque un cuadrado tiene cuatro, el triángulo posee 3 donde el cuarto borde que no va se refiere al sentido de la punta del triángulo). Veamos un ejemplo del triángulo con punta hacia arriba.
<html>
<head>
<title>El triángulo</title>
<style>
div.triangulo {
width:0px;
height:0px
border-bottom: 70px solid #3f3f3f;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
}
</style>
</head>
<body>
<div class="triangulo"></div>
</body>
</html>Si observan, el triángulo de punta hacia arriba tiene su borde opuesto (border-bottom) con el color de fondo, y los demás bordes son transparentes. Entonces, se puede decir que esa es una de sus propiedades, Si quieres definir el sentido de la punta del triángulo, colócale al borde opuesto el color de fondo.Propiedades
border-opuesto:tamaño solid color;Donde opuesto toma como valor: top, bottom, left o right. Dependiendo del lado a donde va la punta. Y color toma como valor: un color hexadecimal o escrito en inglés como red, yellow, orange, blue, green, etc.
Si le ponemos un width definido al triángulo, obtendremos un trapecio. Y con ésto, ya tenemos el conociemiento para formar tres figuras geométricas.
Trapecio
<html>
<head>
<title>El trapecio</title>
<style>
div.trapecio{
width:80px;
height:0px
border-bottom: 70px solid #3f3f3f;
border-right: 70px solid transparent;
border-left: 70px solid transparent;
}
</style>
</head>
<body>
<div class="trapecio"></div>
</body>
</html>
