CSS Shapes

css shapes

shape of css

By using css we can make interesting and unique layouts of geometric shapes. In this article we’re going to go over the basics and creating some simple layouts using these new CSS technologies.

we are creating some Basic shapes like cricle, triangle, rectangle, square,oval and some other shapes.we can make lots of shapes in CSS with only a single HTML element.

Rectangle

To design a rectangle using css we have to add width and height so, that we have the exact size rectangle we need.

we are creating a class called .cssrectangle. In that we defined some properties like width:240px, height:120px and background:#1abc9b. By using this properties we created a Rectangle as shown below.

<div class="cssrectangle"></div>
 .cssrectangle {
	width:240px;
	height:120px;
	background:#1abc9b;
}

Square

To design a Square using css we have to add width and height so, that we have the exact size Square we need.

we are creating a class called .csssquare. In that we defined some properties like width:120px, height:120px and background:#1abc9b. By using this properties we created a Square as shown below.

 <div class="csssquare"></div>
.csssquare {<br>
    width:120px;<br>
    height:120px;<br>
    background:#1abc9b;<br>
}

 

Circle

To design a Circle using css we have to add border-radius and we can round that shape, and enough of it we can turn those rectangles into Circle.

we are creating a class called .csscircle. In that we defined some properties like width:120px, height:120px, background:#1abc9b, and border-radius:50%. By using this properties we created a Circle as shown below.

<div class="csscircle"></div>
 .csscircle {
	width:120px;
	height:120px;
	background:#1abc9b;
	border-radius:50%;
}

Oval

To design a Oval using css we have to add border-radius and we can round that shape, and enough of it we can turn those rectangles into Oval.

we are creating a class called .cssoval. In that we defined some properties like width:120px, height:120px, background:#1abc9b, and border-radius:100px/50px. By using this properties we created a Oval as shown below.

<div class="cssoval"></div>
  .cssoval {
	width: 200px; 
   height: 100px; 
   background:#1abc9b; 
   -moz-border-radius: 100px / 50px; 
   -webkit-border-radius: 100px / 50px; 
   border-radius: 100px / 50px;
}

Triangle Up

To design a Triangle upside using css we have to add border so,that we get the Triangle facing upwards.

we are creating a class called .cssarrowup In that we defined some properties like width:0, height:0,border-left:60px solid transparent, border-right:60px solid transparent,border-bottom:120px solid #1abc9b. By using this properties we created a Triangle up as shown below.

 <div class="cssarrowup"></div>
  .cssarrowup {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-bottom: 120px solid #1abc9b;
}

Triangle Down

To design a Triangle Downside using css we have to add border so,that we get the Triangle facing downwards.

we are creating a class called .cssarrowdown. In that we defined some properties like width:0, height:0 ,border-left:60px solid transparent, border-right:60px solid transparent, border-top:120px solid #1abc9b. By using this properties we created a Triangle down as shown below.

<div class="cssarrowdown"></div>
  .cssarrowdown {
	width: 0;
	height: 0;
	border-left: 60px solid transparent;
	border-right: 60px solid transparent;
	border-top: 120px solid #1abc9b;
}

Triangle Right

To design a Triangle right using css we have to add border so,that we get the Triangle towards Right.

we are creating a class called .cssarrowright. In that we defined some properties like width:0, height:0, border-left:120px solid transparent, border-top:60px solid transparent, border-bottom:60px solid #1abc9b. By using this properties we created a Triangle down as shown below.

 <div class="cssarrowright"></div>
  .cssarrowright {
	width: 0;
	height: 0;
	border-left: 120px solid #1abc9b;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Triangle Left

To design a Triangle Left using css we have to add border so,that we get the Triangle towards left

we are creating a class called .cssarrowleft. In that we defined some properties like width:0, height:0, border-right:120px solid #1abc9b, border-top:60px solid transparent,and border-bottom:60px solid transparent. By using this properties we created a Triangle Left as shown below.

<div class="cssarrowleft"></div>
 .cssarrowleft {
	width: 0;
	height: 0;
	border-right: 120px solid #1abc9b;
   border-top: 60px solid transparent;
   border-bottom: 60px solid transparent;
}

Triangle Top Left

To design a Triangle Top left using css we have to add border so,that we get the Triangle facing Top Left

we are creating a class called .css_triangle_topleft. In that we defined some properties like width:0, height:0 border-right:120px solid transparent, border-top:120px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_topleft"></div>
 .css_triangle_topleft {
	width: 0;
	height: 0;
	border-right: 120px solid transparent;
   border-top: 120px solid #1abc9b;
}

Triangle Top Right

To design a Triangle Top Right using css we have to add border so,that we get the Triangle facing Top Right.

we are creating a class called .css_triangle_topright. In that we defined some properties like width:0, height:0 border-left: 120px solid transparent,border-top: 120px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_topright"></div>
  .css_triangle_topright {
	width: 0;
	height: 0;
	border-left: 120px solid transparent;
   border-top: 120px solid #1abc9b;
}

Triangle Bottom Right

To design a Triangle bottom Right using css we have to add border so,that we get the Triangle facing bottom Right

we are creating a class called .css_triangle_bottomright. In that we defined some properties like width:0, height:0 border-left: 100px solid transparent, border-bottom: 100px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

<div class="css_triangle_bottomright"></div>
.css_triangle_bottomright {<br>
    width: 0;<br>
    height: 0;<br>
    border-bottom: 100px solid #1abc9b; <br>
   border-left: 100px solid transparent; <br>
}

Triangle Bottom Left

To design a Triangle bottom Left using css we have to add border so,that we get the Triangle facing bottom Left.

we are creating a class called .css_triangle_bottomleft. In that we defined some properties like width:0, height:0 border-left: 100px solid transparent, border-bottom: 100px solid #1abc9b. By using this properties we created a Triangle Top Left as shown below.

 <div class="css_triangle_bottomleft"></div>
 .css_triangle_bottomleft {
	width: 0;
	height: 0;
	border-bottom: 100px solid transparent; 
   border-left: 100px solid #1abc9b; 
}

It is very simple and easy to use , all major browsers Chrome, Mozilla, Safari, Internet Explorer are supported. Most common shapes created by css3, These chapter will give you the best and easy css3 shapes. we reduce the time of design in images using photoshop.

Leave a Reply

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