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…

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




Curso Gratis*: Diseño e ilustración de personajes increíbles

*Aprovecha este momento para desarrollar tu creatividad en casa. Disfruta de este curso completamente gratis.

*Cabe aclarar que un curso en abierto, donde podrás ver las unidades de forma gratuita, pero para desbloquear el contenido adicional, deberás comprar el curso. Si así lo deseas puedes usar nuestro cupón con 10% de Descuento: JESUS_AMARO_2-FACIALIX


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



Fuente: Aquí En Sistemas


Jesús Amaro

No importa lo que fuiste ni lo que hiciste, lo que importa es quien eres y en lo que te convertirás.

También te podría gustar...

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.