Loading...

Contact

How to Make Shapes with CSS?

01 Dec 2016 by Ravi Sah
Share Blog Post

CSS Shapes

Hello every one i am ravi, in todays tutorial, permits create a simple list of the most commonplace shapes that may be created the usage of CSS3. we are able to make progress through the item and at the end, you may learn how to create some thing honestly splendid. This educational will provide you with an perception into CSS3 Shapes and a way to create them for your very own. It covers more than one shapes that could truely speed up your web page, as the need for photos will reduce. CSS Shapes allow net designers to create extra abstract, geometric layouts, beyond simple rectangles and squares. The specification affords us with new CSS properties which consist of form-out of doors and shape-margin. Browser help is cheap, even though these properties are currently only available in Chrome, Opera, and Safari, with the -webkit- prefix, hence -webkit-form-out of doors.

1. Square


#square { 
  width: 100px; 
  height: 100px; 
  background: #CE0000; 
}

2. Rectangle


#rectangle { 
  width: 200px; 
  height: 100px; 
  background: #CE0000; 
}

3. Circle


#circle { 
  width: 100px; 
  height: 100px; 
  background: #CE0000; 
  -moz-border-radius: 50%; 
  -webkit-border-radius: 50%; 
  border-radius: 50%; 
}

4. Oval


#oval { 
  width: 200px; 
  height: 100px; 
  background: #CE0000; 
  -moz-border-radius: 100px / 50px; 
  -webkit-border-radius: 100px / 50px; 
  border-radius: 100px / 50px; 
}

5. Triangle


#triangle { 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 100px solid #CE0000; 
}

6. Triangle Top Left


#triangle-topleft { 
  width: 0; 
  height: 0; 
  border-top: 100px solid #CE0000; 
  border-right: 100px solid transparent; 
}

7. Triangle Bottom Left


#triangle-bottomleft { 
  width: 0; 
  height: 0; 
  border-bottom: 100px solid #CE0000; 
  border-right: 100px solid transparent; 
}

8. Trapezoid


#trapezoid { 
  border-bottom: 100px solid #CE0000; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  height: 0; 
  width: 100px; 
}

9. Parallelogram


#parallelogram { 
  width: 150px; 
  height: 100px; 
  -webkit-transform: skew(20deg); 
  -moz-transform: skew(20deg); 
  -o-transform: skew(20deg); 
  background: #CE0000; 
}

10. Star


#star-five { 
  margin: 50px 0; 
  position: relative; 
  display: block; 
  color: #CE0000; 
  width: 0px; 
  height: 0px; 
  border-right: 100px solid transparent; 
  border-bottom: 70px solid #CE0000; 
  border-left: 100px solid transparent; 
  -moz-transform: rotate(35deg); 
  -webkit-transform: rotate(35deg); 
  -ms-transform: rotate(35deg); 
  -o-transform: rotate(35deg); 
} 

#star-five:before { 
  border-bottom: 80px solid #CE0000; 
  border-left: 30px solid transparent; 
  border-right: 30px solid transparent; 
  position: absolute; 
  height: 0; 
  width: 0; 
  top: -45px; 
  left: -65px; 
  display: block; 
  content: ''; 
  -webkit-transform: rotate(-35deg); 
  -moz-transform: rotate(-35deg); 
  -ms-transform: rotate(-35deg); 
  -o-transform: rotate(-35deg); 
} 

#star-five:after { 
  position: absolute; 
  display: block; 
  color: #CE0000; 
  top: 3px; 
  left: -105px; 
  width: 0px; 
  height: 0px; 
  border-right: 100px solid transparent; 
  border-bottom: 70px solid #CE0000; 
  border-left: 100px solid transparent; 
  -webkit-transform: rotate(-70deg); 
  -moz-transform: rotate(-70deg); 
  -ms-transform: rotate(-70deg); 
  -o-transform: rotate(-70deg); 
  content: ''; 
}

11. Pentagon


#pentagon { 
  position: relative; 
  width: 54px; 
  border-width: 50px 18px 0; 
  border-style: solid; 
  border-color: #CE0000 transparent; 
} 

#pentagon:before { 
  content: ""; 
  position: absolute; 
  height: 0; 
  width: 0; 
  top: -85px; 
  left: -18px; 
  border-width: 0 45px 35px; 
  border-style: solid; 
  border-color: transparent transparent #CE0000; 
}

12. Hexagon


#hexagon { 
  width: 100px; 
  height: 55px; 
  background: #CE0000; 
  position: relative; 
} 

#hexagon:before { 
  content: ""; 
  position: absolute; 
  top: -25px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-bottom: 25px solid #CE0000; 
} 

#hexagon:after { 
  content: ""; 
  position: absolute; 
  bottom: -25px; 
  left: 0; 
  width: 0; 
  height: 0; 
  border-left: 50px solid transparent; 
  border-right: 50px solid transparent; 
  border-top: 25px solid #CE0000; 
}

13. Octagon


#octagon { 
  width: 100px; 
  height: 100px; 
  background: #CE0000; 
  position: relative; 
} 

#octagon:before { 
  content: ""; 
  position: absolute; 
  top: 0; 
  left: 0; 
  border-bottom: 29px solid #CE0000; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; 
  height: 0; 
} 

#octagon:after { 
  content: ""; 
  position: absolute; 
  bottom: 0; 
  left: 0; 
  border-top: 29px solid #CE0000; 
  border-left: 29px solid #eee; 
  border-right: 29px solid #eee; 
  width: 42px; 
  height: 0; 
}

14. Heart


#heart { 
  position: relative; 
  width: 100px; 
  height: 90px; 
} 

#heart:before, #heart:after { 
  position: absolute; 
  content: ""; 
  left: 50px;
  top: 0; 
  width: 50px; 
  height: 80px; 
  background: #CE0000; 
  -moz-border-radius: 50px 50px 0 0; 
  border-radius: 50px 50px 0 0; 
  -webkit-transform: rotate(-45deg); 
  -moz-transform: rotate(-45deg); 
  -ms-transform: rotate(-45deg); 
  -o-transform: rotate(-45deg); 
  transform: rotate(-45deg); 
  -webkit-transform-origin: 0 100%; 
  -moz-transform-origin: 0 100%; 
  -ms-transform-origin: 0 100%; 
  -o-transform-origin: 0 100%; 
  transform-origin: 0 100%; 
} 

#heart:after { 
  left: 0; 
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg); 
  -ms-transform: rotate(45deg); 
  -o-transform: rotate(45deg); 
  transform: rotate(45deg); 
  -webkit-transform-origin: 100% 100%; 
  -moz-transform-origin: 100% 100%; 
  -ms-transform-origin: 100% 100%; 
  -o-transform-origin: 100% 100%; 
  transform-origin :100% 100%; 
}

15. Diamond Narrow


#diamond-narrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom: 70px solid #CE0000;
  position: relative;
  top: -50px;
}
#diamond-narrow:after {
  content: '';
  position: absolute;
  left: -50px; top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top: 70px solid #CE0000;
}

16. Egg


#egg { 
  display:block; 
  width: 126px; 
  height: 180px; 
  background-color: #CE0000; 
  -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; 
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
} 

17. Talk Bubble


#talkbubble { 
  width: 120px; 
  height: 80px; 
  background: #CE0000; 
  position: relative; 
  -moz-border-radius: 10px; 
  -webkit-border-radius: 10px; 
  border-radius: 10px; 
} 

#talkbubble:before { 
  content:""; 
  position: absolute; 
  right: 100%; 
  top: 26px; 
  width: 0; 
  height: 0; 
  border-top: 13px solid transparent; 
  border-right: 26px solid #CE0000; 
  border-bottom: 13px solid transparent; 
}

18. Cross


#cross { 
  background: #CE0000; 
  height: 100px; 
  position: relative; 
  width: 20px; 
} 

#cross:after { 
  background: #CE0000; 
  content: ""; 
  height: 20px;
  left: -40px; 
  position: absolute; 
  top: 40px; 
  width: 100px; 
}

Thank you for visiting.

Share Blog Post
Ravi Sah

Ravi Sah

Creative Website Designer

Post Blog Comments

Ready to discuss your project?

Close Free Consuting Form
Responsivness

Free Consultant

100% Privacy. I never share your details.

Close Free Consuting Form

Project Detail