CSS es posible generar una variedad de formas. Cuadrados y rectángulos es fácil porque son Web de forma natural. La adición de la anchura y la altura, obtenemos el tamaño exacto del rectángulo deseado. Agregar bordes radio, que puede poner en la forma de un círculo, el radio de suficiente frontera, puede ponerlas en una circular rectangular y elíptica.
También podemos utilizar las CSS pseudo-elementos :: antes y después ::, que ofrece la posibilidad de añadir dos elementos adicionales a los EE.UU. forma original. Por un uso inteligente de posicionamiento, la conversión, y muchas otras técnicas, podemos crear cualquier número de formas en el CSS con un solo elemento HTML.
Mientras que la mayoría de nosotros ahora utilizar el icono de fuente o imágenes SVG, parece que el uso de CSS para hacer los iconos de importancia no es grande, pero la forma de lograr algunas de las técnicas e ideas usadas en estos iconos son muy digno de nuestro estudio.
1. cuadrada
#square {width: 100px;height: 100px;background: red;}
2. rectángulo
#rectangle {width: 200px;height: 100px;background: red;}
3. Ronda
#circle {width: 100px;height: 100px;background: red;border-radius: 50%}
4. ovalada
#oval {width: 200px;height: 100px;background: red;border-radius: 100px / 50px;}
5. El Triángulo
#triangle-up {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;}
6. triangular inferior
#triangle-down {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;}
7. Triángulo Izquierda
#triangle-left {width: 0;height: 0;border-top: 50px solid transparent;border-right: 100px solid red;border-bottom: 50px solid transparent;}
8. triángulo rectángulo
#triangle-right {width: 0;height: 0;border-top: 50px solid transparent;border-left: 100px solid red;border-bottom: 50px solid transparent;}
9. esquina superior izquierda
#triangle-topleft {width: 0;height: 0;border-top: 100px solid red;border-right: 100px solid transparent;}
10. esquina superior derecha
#triangle-topright {width: 0;height: 0;border-top: 100px solid red;border-left: 100px solid transparent;}
11. esquina inferior izquierda
#triangle-bottomleft {width: 0;height: 0;border-bottom: 100px solid red;border-right: 100px solid transparent;}
12. esquina inferior derecha
#triangle-bottomright {width: 0;height: 0;border-bottom: 100px solid red;border-left: 100px solid transparent;}
13. Flecha
#curvedarrow {position: relative;width: 0;height: 0;border-top: 9px solid transparent;border-right: 9px solid red;transform: rotate(10deg);}#curvedarrow:after {content: "";position: absolute;border: 0 solid transparent;border-top: 3px solid red;border-radius: 20px 0 0 0;top: -12px;left: -9px;width: 12px;height: 12px;transform: rotate(45deg);}
14. trapezoidal
#trapezoid {border-bottom: 100px solid red;border-left: 25px solid transparent;border-right: 25px solid transparent;height: 0;width: 100px;}
15 paralelogramo
#parallelogram {width: 150px;height: 100px;transform: skew(20deg);background: red;}
16. Star (hexagonal)
#star-six {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red;position: relative;}#star-six:after {width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 100px solid red;position: absolute;content: "";top: 30px;left: -50px;}
17. Star (5 ángulo)
#star-five {margin: 50px 0;position: relative;display: block;color: red;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;transform: rotate(35deg);}#star-five:before {border-bottom: 80px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;height: 0;width: 0;top: -45px;left: -65px;display: block;content: '';transform: rotate(-35deg);}#star-five:after {position: absolute;display: block;color: red;top: 3px;left: -105px;width: 0px;height: 0px;border-right: 100px solid transparent;border-bottom: 70px solid red;border-left: 100px solid transparent;transform: rotate(-70deg);content: '';}
18. El pentágono
#pentagon {position: relative;width: 54px;box-sizing: content-box;border-width: 50px 18px 0;border-style: solid;border-color: red transparent;}#pentagon:before {content: "";position: absolute;height: 0;width: 0;top: -85px;left: -18px;border-width: 0 45px 35px;border-style: solid;border-color: transparent transparent red;}
19. hexágono
#hexagon {width: 100px;height: 55px;background: red;position: relative;}#hexagon:before {content: "";position: absolute;top: -25px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 25px solid red;}#hexagon:after {content: "";position: absolute;bottom: -25px;left: 0;width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-top: 25px solid red;}
20. octógono
#octagon {width: 100px;height: 100px;background: red;position: relative;}#octagon:before {content: "";width: 100px;height: 0;position: absolute;top: 0;left: 0;border-bottom: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}#octagon:after {content: "";width: 100px;height: 0;position: absolute;bottom: 0;left: 0;border-top: 29px solid red;border-left: 29px solid #eee;border-right: 29px solid #eee;}
