Have you ever seen a pure CSS website where each and every element is finished through CSS?
CSS does more than just styling elements.
CSS shapes allow web designers to create custom paths like a triangle, circles, polygons, and more.
Unsplash
In this article, well use CSS shapes and a few functional values to code different shapes.
Square and Rectangle
Square and rectangle are the easiest shapes to make in CSS.
All you better do is to create aand give it aheightand awidth.
Do the same with the rectangle to get an ellipse.
Triangles
Well use borders to create triangles.
Wondering how it works?
All you oughta do is to set thewidthandheightof the triangle to zero.
It means, moving forward, theactual widthof the element will be thewidth of the border.
Also, you may already know that the border edges are 45-degrees diagonals to each other.
Give different colors to each border and set any three of them to transparent.
Ultimately, youll have your triangle.
you might play around withheightandborder-colorto get different types of triangles.
Pentagon
it’s possible for you to create a pentagon by combining a trapezoid and a triangle.
Useborderandposition propertiesshape and group them.
Diamond
Group two triangles pointing upwards and downwards using position to create a diamond shape.
Yes, well use theborderproperties to create these triangles.
Ultimately, you might settransform-originto set the point around which the transformation is applied.
Building a super-fast website isnt a hectic task anymore as you know how to play around with the code.
Therefore, keep experimenting and discover new ways to draw awesome shapes purely by CSS.
