How can I make a div with irregular shapes with CSS3 and HTM5?

With CSS3, you can create various shapes including rectangles, triangles, circles, and more complex irregular shapes using properties like border-radius, transform, and clip-path.

Basic Shapes

Rectangle

A simple rectangle is created using width and height properties:

<div id="rectangle"></div>

<style>
#rectangle {
    width: 300px;
    height: 150px;
    background: blue;
}
</style>

Triangle

Triangles are created using border properties with transparent sides:

<div id="triangle"></div>

<style>
#triangle {
    width: 0;
    height: 0;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 150px solid blue;
}
</style>

Irregular Shapes with border-radius

Use border-radius to create curved and organic shapes:

<div id="irregular1"></div>
<div id="irregular2"></div>

<style>
#irregular1 {
    width: 200px;
    height: 200px;
    background: green;
    border-radius: 50% 20% 30% 40%;
}

#irregular2 {
    width: 150px;
    height: 100px;
    background: red;
    border-radius: 100px 50px 80px 20px;
    transform: rotate(15deg);
}
</style>

Advanced Irregular Shapes with clip-path

The clip-path property allows you to create complex custom shapes:

<div id="star"></div>
<div id="polygon"></div>

<style>
#star {
    width: 200px;
    height: 200px;
    background: gold;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

#polygon {
    width: 200px;
    height: 150px;
    background: purple;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
</style>

Combining Techniques

You can combine multiple CSS properties for more complex shapes:

<div id="complex-shape"></div>

<style>
#complex-shape {
    width: 200px;
    height: 200px;
    background: linear-gradient(45deg, orange, pink);
    border-radius: 60% 40% 30% 70%;
    transform: rotate(25deg) scale(1.2);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
</style>

Browser Compatibility

Conclusion

CSS3 offers multiple approaches for creating irregular shapes, from simple border-radius curves to complex clip-path polygons. Choose the method based on your design needs and browser support requirements.