Formas geométricas con CSS. Primera Parte

Vamos a ver una amplicación de las hojas de estilo para crear formas geométricas. Ya hemos visto en otro artículo como utilizar la propiedad border, ahora iremos un poquito más para crear otras formas geométricas.

Empezaremos por las formas más sencillas, cuadrado, rectángulo, triángulos en distintas posiciones… e iremos ampliando poco a poco los ejemplos

Para probar el código tu mismo, solamente tienes que copiar el estilo en tu página, crear un div para aplicar el estilo que has copiado. Por ejemplo, para hacer el cuadrado rojo te copias el código que ves mas abajo y creas un div al que aplicas el estilo cuadrado, es decir:

<div class=»cuadrado»></div>

Y haces lo mismo para el resto de ejemplos.

Cuadrado

.cuadrado {
width: 100px;
height: 100px;
background: red;}

Rectángulo

.rectangulo {
width: 200px;
height: 100px;
background: red;}

Circulo

.circulo {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;}

Ovalo

.ovalo {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;}

Triángulo Arriba

.triangulo-arriba {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;}

Triángulo Derecha

.triangulo-derecha {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Triángulo Abajo

.triangulo-abajo {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Triángulo Izquierda

.triangulo-izquierda {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;}

Triángulos Colores

.triangulo-colores {
width: 0;
height: 0;
border: 100px solid;
border-color: red green blue yellow;}

Corazón

.corazon {
position: relative;
width: 100px;
height: 90px;
}
.corazon:before,
.corazon: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%;
}
.corazon: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%;
}