How to Create CSS Shapes, Support All Modern Browsers

css shapes

CSS Shapes

CSS Shapes By using this shapes 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 can create SVG Shapes using Background-Clip-Path.

Background Clip Path CSS Shape

We will teach you how Background Clip Path create a mask in different shapes. In this section will create a one polygon shape with movie poster mask. 

Polygon Shape : SVG 

But let’s start with SVG a shape. Follow the below Example:

Background image clip path
Background image clip path

We are creating some Basic shapes like circle, triangle, rectangle, square,oval and some other shapes. We can make lots of shapes in CSS with only a single HTML element.  Apply CSS Shape to any HTML Button.

Rectangle : CSS Shape

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 : CSS Shape

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 : CSS Shape

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 : CSS Shape

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 Arrow Shape

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 Arrow Shape

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 Arrow Shape

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 Arrow Shape

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 Arrow Shape

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 Arrow Shape

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 Arrow Shape

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 Arrow Shape

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.

Browser Compatiblity:

Full Support of CSS Properties

Browser Compatibility
Browser Compatibility

Comments on “How to Create CSS Shapes, Support All Modern Browsers

  1. The next CSS rule is for the div with the ID of shape_contain. This is set to fill the browser with any overflow hidden. The translate is to ensure that the content is hardware-accelerated. A large border is added before two background images. One is a regular image while the one above is an aqua-coloured, semi-transparent gradient.

  2. I’ve been absent for some time, but now I remember why I used to love this blog. Thank you, I?¦ll try and check back more often. How frequently you update your website?

Leave a Reply

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