This tutorial is aimed at all those interested in learning how to create geometric figures in CSS.
CSS (Cascading Style Sheet) is a graphic design language for defining and creating the presentation of a structured document written in a markup language. 1
It allows us to create decorative figures on our web pages in order to reduce the load of images.
It may interest you…
Square
CSS code
| 1 2 3 4 5 | .cuadrado { width: 100px; height: 100px; background: #AAEECC; } |
Figure
Circle
CSS code
| 1 2 3 4 5 6 7 8 9 | .circulo { width: 100px; height: 100px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background: #5cb85c; } |
Figure
Triangle
CSS code
| 1 2 3 4 5 6 7 | .triangulo { width: 0; height: 0; border-left: 100px solid #f0ad4e; border-top: 50px solid transparent; border-bottom: 50px solid transparent; } |
Figure
rect
CSS code
| 1 2 3 4 5 | .rectangulo { width: 250px; height: 100px; background: #428bca; } |
Figure
Rhombus
CSS code
| 1 2 3 4 5 6 7 8 9 10 | .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); } |
Figure
Find free courses in this link or in the button below.
Follow Facialix on all his social networks:
Source: Here In Systems
Latest posts by Jesus Amaro (see all)
- Free Course: Creating Videogames with Unity 3D - 21 April, 2021
- Free Course: Learn Java from Scratch - 21 April, 2021
- Free Course: Design A Professional Website With HTML And CSS Effects - 21 April, 2021