Different shapes using div element

Learn how to create different shapes using CSS properties like border-radius, transform, and box-shadow.

HTML Structure


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="shapes.css" />
    <title>Shpaes and shadow</title>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
  </body>
</html>

Run Code

CSS Code


.box1{
    width:200px;
    height: 200px;
    background-color: blueviolet;
    margin:15px;
    box-shadow: 10px 10px 20px black;
    }
.box2{
    width:200px;
    height: 200px;
    background-color: rgb(226, 156, 43);
    margin:15px;
    border-radius: 20px;
    }
.box3{
    width:200px;
    height: 200px;
    background-color: rgb(51, 189, 53);
    margin:15px;
    border-radius: 30px 10px 25px 5px;
    } 
.box4{
    width:200px;
    height: 200px;
    background-color: rgb(226, 43, 92);
    margin:15px;
    border-radius: 50%;
        }
       
.box5{
    width:200px;
    height:200px;
    background-color: rgb(43, 226, 211);
    margin:15px;
    transform: rotate(40deg);
        } 
.box6{
    width:200px;
    height: 200px;
    background-color: rgb(80, 226, 43);
    margin:15px;
    transform: skew(20deg);
}

Run Code

Explanation

1. Square with Shadow

.box1: A simple square with a shadow created using box-shadow: 10px 10px 20px black;.

2. Rounded Rectangle

.box2: A rectangle with evenly rounded corners using border-radius: 20px;.

3. Irregular Rounded Corners

.box3: A rectangle with different rounding values for each corner using border-radius: 30px 10px 25px 5px;.

4. Circle

.box4: A perfect circle created by setting border-radius: 50%;.

5. Rotated Square

.box5: A rotated square created using transform: rotate(40deg);.

6. Skewed Rectangle

.box6: A skewed rectangle created using transform: skew(20deg);.

Previous Next