Skip to content

Shapes and figures that can be created using CSS

    1. Circle Most
    simplest shape, create it using a square with a border-radius 50%
    2. Semi-Circle
    A rectangle with a round borders on the top left & top right.
    3. Triangle
    Doesn’t requires background color, only solid borders are needed
    4. Parallelogram
    Simple rectangle with a skew transformation.
    5. Trapezium
    Totally same as triangle but in this case, we require width for the trapezium.
    6. Pentagon Requires a triangle, with a trapezium
    7. Hexagon Two Trapezium of same size arrange in each others opposite direction.
    8. Heart Two rectangle with round borders on its sides\
    9. Moon
    Round circle with a box-shadow
    10. Star
    Three Triangles arranged like a star
    Credits To : https://twitter.com/Krishn_aGupta/status/1431943362626473989