• Autor de la entrada:
  • Categoría de la entrada:Tutoriales


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…

Cuadrado

Código CSS

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

Figura

CSS Interno

Circulo

Código CSS

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

Figura

CSS Interno



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

CSS Interno

Rectangulo

Código CSS

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

Figura

CSS Interno


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

CSS Interno



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



Fuente: Aquí En Sistemas


Jesús Amaro

Si lees esto, es por que sabes leer. Un saludo...

Deja una respuesta