Creating Basic Shapes with CSS

CSS provides a powerful set of tools for creating visually appealing web pages. One of the most commonly used features of CSS is the ability to create basic shapes, such as squares, circles, triangles, parallelograms, and diamonds. In this article, we will explore how to create these shapes using CSS.

Points to be discussed

Square
Circle
Triangle
Parallelogram
Diamond

Start with the basic code structure. We have index.html and style.css.

Basic code, which we are going to use for the following functionality:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shapes with CSS</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="main">

    <div class="container">
      <div class="ShapeName"> </div>
    </div>
  </div>

</body>

</html>

style.css

* {
  padding: 0;
  margin: 0;
}

.main {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

As per the above basic code, we need to write the proper class name according to that. So further, we just change from shapeName to any proper shape’s name and style according to it.

Example : →

1. Square

HTML :

<div class="square"> </div>

CSS :

.square {
  background: linear-gradient(33deg, #6cacff, #8debff);
  width: 100px;
  height: 100px;
}

Preview :

2. Circle

HTML :

<div class="circle"> </div>

CSS :

.circle {
  background: linear-gradient(33deg, #6cacff, #8debff);
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

Preview :

3. Triangle

HTML :

<div class="triangle"> </div>

CSS :

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid transparent;
  background-color: #6cacff;
}

*** → Note : *By modifying the border you can also make up-triangle, right-triangle, and left-triangle.

Preview :

4. Parallelogram

HTML :

<div class="parallelogram"> </div>

CSS :

.parallelogram {
  background: linear-gradient(33deg, #6cacff, #8debff);
  width: 100px;
  height: 50px;
  transform: skew(15deg);
}

Preview :

5. Diamond

HTML :

<div class="diamond"> </div>

CSS :

.diamond {
  background: linear-gradient(33deg, #6cacff, #8debff);
  width: 100px;
  height: 100px;
  transform: rotate(45deg);
}

Preview :

Blog

Creating Basic Shapes with CSS

Rutvik Patel

Points to be discussed

index.html

style.css

1. Square

2. Circle

3. Triangle

4. Parallelogram

5. Diamond

Join Our Newsletter. No Spam, Only the good stuff.

Related