Demo here.
I got intrigued by the possibility of css to render some primitive geometric figures.
How it works:
Square : just a plain border to a dummy element with equal width and height
Rectangle : Same as square with unequal width and height
Trapezium / Double Trapezium : Wonder how it works? border width is nothing but the thickness of that particular border side. If it is transparent, the space is allocated but border is not drawn. Note that each side border is nothing but a trapezium by itself. By making the adjacent sides transparent, you get a trapezium.
Triangle : If the width of the element becomes zero pixels, the border converges and creates a triangle. Nice, right?
Diamond: Simply place upward triangle on top of a downward triangle.
Circle/Oval : We use border-radius property get a rounded square or rectangle. What if the border-radius is half the width? You get a perfect circle or oval depending on width and height of the html element.
Now that we can draw the basic figures, other complex figures can be drawn using a combination of these. I found this page interesting. You get play with CSS shapes to create more complicated shapes. If you are in a rush and want some readymade styles look here.
I got intrigued by the possibility of css to render some primitive geometric figures.
How it works:
Square : just a plain border to a dummy element with equal width and height
Rectangle : Same as square with unequal width and height
Trapezium / Double Trapezium : Wonder how it works? border width is nothing but the thickness of that particular border side. If it is transparent, the space is allocated but border is not drawn. Note that each side border is nothing but a trapezium by itself. By making the adjacent sides transparent, you get a trapezium.
Triangle : If the width of the element becomes zero pixels, the border converges and creates a triangle. Nice, right?
Diamond: Simply place upward triangle on top of a downward triangle.
Circle/Oval : We use border-radius property get a rounded square or rectangle. What if the border-radius is half the width? You get a perfect circle or oval depending on width and height of the html element.
Now that we can draw the basic figures, other complex figures can be drawn using a combination of these. I found this page interesting. You get play with CSS shapes to create more complicated shapes. If you are in a rush and want some readymade styles look here.
No comments:
Post a Comment