CSS commonly used shape

CSS is possible to generate a variety of shapes. Squares and rectangles is easy because they are web natural shape. Adding the width and height, we get the exact size of the desired rectangle. Adding borders radius, you can put into the shape of a circle, the radius of border enough, you can put these into a rectangular circular and elliptical.

We can also use the CSS pseudo-elements :: before and :: after, which offers the possibility of adding two additional elements to the original shape us. By clever use of positioning, conversion, and many other techniques, we can create any number of shapes in the CSS with only one HTML element.

While most of us now use the font icon or svg images, it seems to use CSS to do the icons significance is not great, but how to achieve some of the techniques and ideas used in these icons are very worthy of our study.

1. square

•  

#square {  width: 100px;  height: 100px;  background: red;}

2. rectangle

•  

#rectangle {  width: 200px;  height: 100px;  background: red;}

3. Round

•  

#circle {  width: 100px;  height: 100px;  background: red;  border-radius: 50%}

4. oval

•  

#oval {  width: 200px;  height: 100px;  background: red;  border-radius: 100px / 50px;}

5. On Triangle

•  

#triangle-up {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-bottom: 100px solid red;}

6. lower triangular

•  

#triangle-down {  width: 0;  height: 0;  border-left: 50px solid transparent;  border-right: 50px solid transparent;  border-top: 100px solid red;}

7. Left Triangle

•  

#triangle-left {  width: 0;  height: 0;  border-top: 50px solid transparent;  border-right: 100px solid red;  border-bottom: 50px solid transparent;}

8. Right Triangle

•  

#triangle-right {  width: 0;  height: 0;  border-top: 50px solid transparent;  border-left: 100px solid red;  border-bottom: 50px solid transparent;}

9. upper left corner

•  

#triangle-topleft {  width: 0;  height: 0;  border-top: 100px solid red;  border-right: 100px solid transparent;}

10. upper right corner

•  

#triangle-topright {  width: 0;  height: 0;  border-top: 100px solid red;  border-left: 100px solid transparent;}

11. bottom left corner

•  

#triangle-bottomleft {  width: 0;  height: 0;  border-bottom: 100px solid red;  border-right: 100px solid transparent;}

12. bottom right corner

•  

#triangle-bottomright {  width: 0;  height: 0;  border-bottom: 100px solid red;  border-left: 100px solid transparent;}

13. Arrow

•  

#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 parallelogram

•  

#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 angle)

•  

#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. The pentagon

•  

#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. hexagon

•  

#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. octagon

•  

#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;}