Tutorial CSS: Crea Figuras Geométricas

Este tutorial está dirigido a todas aquellas personas interesadas en aprender a crear figuras geométricas en CSS.

CSS (Hoja de estilos en cascada) es un lenguaje de diseño gráfico para definir y crear la presentación de un documento estructurado escrito en un lenguaje de marcado.​ 1

Nos permite crear figuras decorativas en nuestras páginas web con el fin de reducir la carga de imágenes.

Te Puede Interesar…

• Curso Gratuito: Introducción a la Web

Cuadrado

Código CSS

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

Figura

Circulo

Código CSS

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

Figura

Triangulo

Código CSS

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

Figura

Rectangulo

Código CSS

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

Figura

Rombo

Código 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);
}

Figura

Encuentra cursos gratuitos en este enlace o en el botón de aquí abajo.

Este artículo pertenece a Facialix y está protegido por derechos de autor. Queda prohibida su reproducción total o parcial sin autorización previa del autor o titular del contenido.

Fuente: Aquí En Sistemas