DEV Community

Rutvik Patel
Rutvik Patel

Posted on • Originally published at rutikkpatel.Medium

Creating Basic Shapes with CSS

#css #webdev #frontend #beginners

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.

Created By [Author](https://medium.com/@rutikkpatel) ([Rutik Patel](https://medium.com/@rutikkpatel))

 

Points to be discussed

  1. Square

  2. Circle

  3. Triangle

  4. Parallelogram

  5. 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>
Enter fullscreen mode Exit fullscreen mode

 

style.css 

* {
  padding: 0;
  margin: 0;
}

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

 
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>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

Preview :

 

2. Circle

HTML :

<div class="circle"> </div>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

Preview :

 

3. Triangle

HTML :

<div class="triangle"> </div>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

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

Preview :

 

4. Parallelogram

HTML :

<div class="parallelogram"> </div>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

Preview :

 

5. Diamond

HTML :

<div class="diamond"> </div>
Enter fullscreen mode Exit fullscreen mode

CSS :

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

Preview :

Top comments (0)

Read next

mikeyoung44 profile image

Weight Decay's Critical Role: Theoretical Insights for Better Deep Learning Generalization

Mike Young -

mikeyoung44 profile image

AI Boosts Math Construction Problems: PatternBoost Finds Elegant Solutions

Mike Young -

abel5173 profile image

Seeking Advice: Navigating Entry-Level Remote Job Opportunities and Skill-Building

Abel -

danieljcafonso profile image

This Month in Solid #9: SolidHack started, new fellow and API change 😎

Daniel Afonso -