Aprende a crear generar de figuras geométricas CSS

Aquí en sistemas puedes aprender a crear un generador de figuras geométricas CSS de forma sencilla. Te dejamos los códigos de las principales figuras geométricas.

Cuando empiezas a desarrollar usas formas geométricas básicas como elementos decorativos. También puedes insertar imágenes o iconos vectoriales pero esto te ayudara a crear formas y cargar tu pagina mas rápido y aprender sobre CSS.

En este post he puesto a tu disposición snippets CSS para crear figuras básicas como cuadrados, círculos y triángulos. A partir de estas tres figuras básicas podrás generar fácilmente otras formas como rombos, trapecios y otros.

Te puede interesar

Figuras básicas con CSS

Cuadrado con CSS

Los cuadrados son las figuras geométricas más fáciles de dibujar con CSS.

.cuadrado {
    width: 100px; 
    height: 100px; 
    background: #428bca;
}

Circulo con CSS

Del cuadrado podemos obtener el círculo y figuras redondeadas solamente aplicando la propiedad border-radius. Dependiendo de la forma le aplicamos un porcentaje en los cuatro bordes para generar un circulo.

.circulo {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #5cb85c;
}

Triangulo con CSS

En CSS podemos definir cada uno de los cuatro bordes de un bloque de forma diferente. Se puede aprovechar esta característica para dibujar formas derivadas del cuadrado, como el triángulo,

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

Otras figuras con CSS

A partir de las tres figuras básicas podemos formar nuevas como rectángulos, rombos, óvalos, trapecios, etc.

Rectangulo CSS

.rectangulo {
    width: 250px; 
    height: 100px; 
    background: #428bca;
}

Rombo CSS

.rombo {
    width: 100px; 
    height: 100px; 
    background: #428bca;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

Paralelogramo CSS

.paralelogramo {
    width: 150px; 
    height: 100px; 
    background: #428bca;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}

Trapecio CSS

.trapecio {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #428bca;
}

Ovalo CSS

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

Mediante estas figuras ya podrás formar nuevas formas en tus paginas HTML que te ayudaran a tener un aspecto mucho mas visual para tus visitantes.

Aprende mas sobre CSS

Deja un comentario