Complex shapes and layout design in CSS

Some shapes or layout design in CSS is a little bit tricky to design in CSS code. using border-radius we can create many different shapes.CSS clip-path property will make complex shapes CSS design a lot easier to write code.

using the border-radius property

I will start with simple shapes and go to complex shapes

let's create the rounded corner rectangle

<!-- Rectangle with single border radius-->
<div class="rectangle">

</div>

.rectangle{
    background:#3380FF;
    width: 20rem;
    height: 20rem;
    border-radius:25px;
}

In the above CSS code border-radius property applied and rounded corner rectangle formed.

Let's change border-radius property value 2 different values

.rectangle{
    ....
    border-radius:25px 10px;
}

first value in the border-radius is for top left and bottom right corner.
second value is for top right and bottom left corner.Thus we can have different rounded corner.

border-radius property can also have 4 values.Each value for each corner.

.rectangle{
    ....
    border-radius:10px 20px 30px 40px;
}

first in the border-radius is for top left and 2nd is top right,3rd value is for bottom right and finally 4th one is bottom left value.

There is another way of providing the value of the border-radius property which is eight different value with "/" with 1 to 4 value on each side of the slash

let's look into the CSS code

    border-radius:[top-left horizontal radius] [top-right horizontal radius] [bottom-right horizontal radius] [bottom-left horizontal radius] / [top-left vertical radius] [top-right vertical radius] [bottom-right vertical radius] [bottom-left vertical radius]

As mentioned in the above code before the slash are for horizontal border-radius and after the slash are for vertical border-radius

.rectangle{
    border-radius:10px 20px 30px 40px/ 40px 30px 20px 10px;
}

All the values of the border-radius can be provided as percentage or em. If I write border-radius as 50% with square it will be converted to circle which is the beauty of the border-radius property.

Recently I found an amazing tool to create asymmetric shapes. So guy's here it is 9elements
In this tool, you can create n number of different shapes with a border-radius property only.
In the next blog, I will write about clip-path and other complex CSS shapes.