background-shape
CSS

How to Create Background Shapes From CSS?

Khushal

Today we will Learn How to Create a Background Shape from CSS. It will have all types of Shapes like Triangle Shape, Circle Shape , Rectangle Shape, Close Shape, Star Shape and other Shapes which are as follows.

Let us see one by one how to create Background Shape with the help of CSS

Looking at this blog, I think you will get an idea of ​​how to create a Background Shape.

Only HTML format is ready. Here we will add CSS according to Different Shapes.

<!DOCTYPE html>
<html>
<head>
  <title>
    Background Shapes
  </title>
<style>
 /*********Add Shape CSS HERE*************/  

</style>
</head>
<body>

<div class="class1"></div>

</body>
</html>

In this CSS Clip-path:, the race to give% to polygon according to Shape is as follows.

clip-path: polygon(0% 0%, 0% 0%, 0% 0%, 0% 0%);

Triangle Shape

How to Create Triangle Shape Background?

Create a Triangle shape background This is very easy. All you have to do is add a CSS style called Clip-Path. See below for how to use it.

CSS

 

 /*********Add Shape CSS HERE*************/  


  *{
     padding: 0;
     margin: 0;
    }
    .class1{
    height: 250px;
    width: 250px;
    clip-path: polygon(50% 0, 0% 100%, 100% 100%);
    background-color:yellow;
    }

Output:-

Background Shapes

Trapezoid Shape

How to Create Trapezoid Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    background-color:green;
    }

Output:-

Background Shapes

Parallelogram Shape

How to Create Parallelogram Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    background-color:Blue;
    }

Output:-

Background Shapes

Rhombus Shape

How to Create Rhombus Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    background-color:red;
    }

Output:-

Background Shapes

Pentagon Shape

How to Create Pentagon Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
   clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
   background: #f44ff4;
    }

Output:-

Background Shapes

Hexagon Shape

How to Create Hexagon Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
   background: #f6f656;
    }

Output:-

Background Shapes

Heptagon Shape

How to Create Heptagon Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
   background: #f6f956;
    }

Output:-

Background Shapes

Octagon Shape

How to Create Octagon Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
   background: #021355;
    }

Output:-

Background Shapes

Nonagon Shape

How to Create Nonagon Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
   clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
   background: #145355;
    }

Output:-

Background Shapes

Decagon Shape

How to Create Decagon Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 70%, 80% 90%, 50% 100%, 20% 90%, 0% 70%, 0% 35%, 20% 10%);   background: #145398;
    }

Output:-

Background Shapes

Bevel Shape

How to Create Bevel Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
   clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
   background: #359878;
    }

Output:-

Background Shapes

Rabbet Shape

How to Create Rabbet Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
   clip-path: polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%);
   background: #999878;
    }

Output:-

Background Shapes

Left arrow Shape

How to Create Left arrow Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
   clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
   background: #239878;
    }

Output:-

Background Shapes

Right arrow Shape

How to Create Right arrow Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
   background: #239878;
    }

Output:-

Background Shapes

Left Point Shape

How to Create Left Point Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
   background: #365262;
    }

Output:-

Background Shapes

Right Point Shape

How to Create Right Point Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
   background: #365262;
    }

Output:-

Background Shapes

Left Chevron Shape

How to Create Left Chevron Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
   background: #748742;
    }

Output:-

Background Shapes

Right Chevron Shape

How to Create Right Chevron Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
   background: #748742;
    }

Output:-

Background Shapes

Star Shape

How to Create Star Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
   background: #733342;
    }

Output:-

Background Shapes

LeCross Shape

How to Create Cross Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(10% 25%, 35% 25%, 35% 0%, 65% 0%, 65% 25%, 90% 25%, 90% 50%, 65% 50%, 65% 100%, 35% 100%, 35% 50%, 10% 50%);
   background: #733342;
    }

Output:-

Background Shapes

Message Shape

How to Create Message Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
   background: #133342;
    }

Output:-

Background Shapes

Close Shape

How to Create Close Shape Background?

CSS 

 /*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
   background: #553342;
    }

Output:-

Background Shapes

Frame Shape

How to Create Frame Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
   background: #326584;
    }

Output:-

Background Shapes

Inset Shape

How to Create Inset Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: inset(5% 20% 15% 10%);   background: #326584;
    }

Output:-

Background Shapes

Circle Shape

How to Create Circle Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
   clip-path: circle(50% at 50% 50%); 
    background: gray;
    }

Output:-

Background Shapes

Ellipse Shape

How to Create Ellipse Shape Background?

CSS 

/*********Add Shape CSS HERE*************/  
    *{
      padding: 0;
      margin: 0;
    }
    .class1{
    height: 200px;
    width: 200px;
clip-path: ellipse(25% 40% at 50% 50%);
    background: gray;
    }

Output:-

Background Shapes

What is the clip-path CSS style?

Clip-Path CSS creates a property clipping field that shows which part of the element to show and which part to hide.


, , , ,

Related Posts

performing data validation in php
CSS

How to Optimize PHP Performance for Faster Websites

Khushal
Types of PHP Errors
CSS

Understanding Different Types of PHP Errors: A Comprehensive Guide for Developers

Khushal

One thought on “How to Create Background Shapes From CSS?”

Leave a Reply

Your email address will not be published. Required fields are marked *