Fork me on GitHub
Welcome to Shape Css!!

Download Shape Css And Enjoy It 🙆

Shape CSS (currently v1.1) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.

Shape-CSS CDN

<link href="https://www.shapecss.com/public/shape.css" rel="stylesheet"> 
<!--IMPORTANT: script must be added in the bottom of the body tag-->
<script src="https://www.shapecss.com/public/shape.js"></script>
or


CIRCLES

The basic Syntax of Create a circle (Its Default)

Just create a Basic Circle //Use ( <circle></circle> ) //You Get Default Size, Background-Color with Border and Border-Color <circle></circle> 
circle

The basic Syntax of Create just circle With Radius

// Basic circle // Use (shape-radius="value") <circle shape-radius="120px"></circle> 
circle

The basic Syntax of Create a circle with Background

// Basic circle With Radius And Background. // Use (shape-radius="value") // Use (shape-Background="color")  <circle class="center-block" shape-radius="120px" shape-background="firebrick"></circle> 
circle

The basic Syntax of Create just circle with Background and Border With color

// Basic circle With Radius,Border With Color And circle Background. // Use (shape-radius="value") // Use (shape-Background="color")  // USe (shape-border="value,color) <circle class="center-block" shape-radius="120px" shape-background="pink" shape-border="3,teal"></circle> 
circle

SQUARES

The basic Syntax of Create squares (Its Default)

<square>Square</square> 
Square

Syntax To Create a squares with (shape-Width)

//Use (shape-width="value with px") <square shape-width="120px"></square> 
Square

The Syntax of Create squares with shape-width, shape-border and border colour .

//Use (shape-width="value with px") //Use (shape-border="value, color") <square shape-width="120px" shape-border="3,teal"></square> 
Square

The basic Syntax of Create squares with shape,border with color and Background.

//Use (shape-width="value with px") //Use (shape-border="value, color") //Use ( shape-background="color") <square shape-width="120px" shape-border="3,teal" shape-background="firebrick"></square> 
Square
RECTANGLE

The basic Syntax of Create RECTANGLE (Its default)

Just create a Basic Rectangle //Use ( <rectangle> </rectangle> ) //You Get Default Size, Background-Color with Border and Border-Color <rectangle>Rectangle</rectangle> 
Rectangle

The Basic Rectangle With shape-height, shape-width.

Just create a Basic Rectangle With shape-height, shape-width. //Use ( <rectangle> </rectangle> ) //Use ( shape-width="value with px" ) //Use ( shape-height="value with px" ) <rectangle shape-width="200px" shape-height="120px" >Rectangle</rectangle> 
Rectangle

The Basic Rectangle With shape-height, shape-width and shape-border

Just create a Basic Rectangle With shape-height, shape-width. //Use ( <rectangle> </rectangle> ) //Use ( shape-width="value with px" ) //Use ( shape-height="value with px" ) //Use ( shape-border="value,color" ) <rectangle class="center-block" shape-width="200px" shape-height="120px" shape-border="3,teal">Rectangle</rectangle> 
Rectangle

The Basic Rectangle With shape-height, shape-width and shape-border and background color

Just create a Basic Rectangle With shape-height, shape-width. //Use ( <rectangle> </rectangle> ) //Use ( shape-width="value with px" ) //Use ( shape-height="value with px" ) //Use ( shape-border="value,color" ) //Use ( shape-background="color" ) <rectangle shape-width="200px" shape-height="120px" shape-background="firebrick" shape-border="3,teal">Rectangle</rectangle> 
Rectangle

PARALLELOGRAM

The basic Syntax of Create parallelogram (Its default)

The basic Syntax of Create a parallelogram. Use ( <parallelogram> </parallelogram> ) You Get just Default Style Of a parallelogram <parallelogram>parallelogram</parallelogram> 
parallelogram

The basic Syntax of Create parallelogram With shape-width, shape-height

The basic Syntax of Create a parallelogram. Use ( <parallelogram> </parallelogram> ) Use ( shape-width="value with px" shape-height="value with px" ) <parallelogram shape-width="300px" shape-height="150px">parallelogram</parallelogram> 
parallelogram

The basic Syntax of Create parallelogram With shape-width, shape-height, shape-border with color

 The basic Syntax of Create a parallelogram. //Use ( <parallelogram> </parallelogram> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-border="value,color" ) <parallelogram shape-width="300px" shape-height="150px" shape-border="5,teal" >parallelogram</parallelogram> 
parallelogram

The basic Syntax of Create parallelogram With shape-width, shape-height, shape-border with color and Background.

parallelogram


TRIANGLES

The basic Syntax of Create a Triangle (Its Default)

The basic Syntax of Create a Triangle. //Use ( <triangle></triangle> ) <triangle></triangle> 

The basic Syntax of Create a (Triangle up) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Up //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-up shape-width="120px" shape-height="120px" shape-background="teal"></triangle-up> 

The basic Syntax of Create a (Triangle Left) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Left //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-left shape-width="120px" shape-height="120px" shape-background="teal"></triangle-left> 

The basic Syntax of Create a (Triangle Right) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Right //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-right shape-width="120px" shape-height="120px" shape-background="teal"></triangle-right> 

The basic Syntax of Create a (Triangle Down) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Down //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-down shape-width="120px" shape-height="120px" shape-background="teal"></triangle-down> 

The basic Syntax of Create a (Triangle Top Left) With shape-width, shape-height & shape-background

>
The basic Syntax of Create a Triangle Top Left //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-top-left shape-background="teal" shape-height="120px" shape-width="120px"> </triangle-top-left> 

The basic Syntax of Create a (Triangle Top Right) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Top Right //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-top-right shape-background="teal" shape-height="120px" shape-width="120px"> </triangle-top-right> 

The basic Syntax of Create a (Triangle Bottom Left) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Bottom Left //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-bottom-left shape-width="120px" shape-height="120px" shape-background="teal"></triangle-bottom-left> 

The basic Syntax of Create a (Triangle Bottom Right) With shape-width, shape-height & shape-background

The basic Syntax of Create a Triangle Bottom Right //Use ( <triangle></triangle> ) //Use ( shape-width="value with px" shape-height="value with px" ) //Use ( shape-background="color" ) <triangle-bottom-right shape-width="120px" shape-height="120px" shape-background="teal"></triangle-bottom-right>