woensdag 30 juli 2014

Make Shapes with CSS: How to Create Different Shapes in CSS

Share the joy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

One of best cool features of CSS3 is that it reduces the use of images in web designs and allows you to create different shapes in CSS. Commonforms that you usually see in Photoshop or Illustrator can now be done using CSS3. New CSS properties like transform and border-radius add complexity with shapes instead of creating them in drawing applications.


In today’s tutorial, let’s create a simple list of the most common shapes that can be done using CSS3.



Resource you need to complete this tutorial


  • Knowledge in CSS3

  • Time and Patience


Circle


circle


HTML


To create a circle in CSS, first we need a div and give it an ID name of the shape. So for this example, set circle as the ID name.


 <div id="circle"></div>

CSS


For the CSS, simply put a width and height and then give it a border radius half of the width and the height.



#circle width: 120px; height: 120px; background: #7fee1d; -moz-border-radius: 60px; -webkit-border-radius: 60px; border-radius: 60px;

Square


square


HTML


To create a square shape in CSS, just like the circle shape, we need a div and give it an ID name of the shape. So, for this example, set square as the ID name.


 <div id="square"></div>

CSS


For the CSS of square, simply set up a width and height of equal value and provide a value making it look visible.



#square width: 120px; height: 120px; background: #f447ff;


Rectangle


rectangle


HTML


To create a rectangular CSS shape, just like the square shape, set-up a div with the ID name rectangle.


 <div id="rectangle"></div>

CSS


Just like the square shape, we will put a simple width but this time larger than the height.



#rectangle width: 220px; height: 120px; background: #4da1f7;


Oval


oblong


HTML


To create an oval in CSS, create a div with the ID name oval.


 <div id="oval"></div>

CSS


Oval is almost similar with circle shape; however, the oval is rectangular in shape and will need a radius that is half of the height.



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


Triangle


triangle


HTML


In order to create a triangle in CSS, set up again a div with the ID name triangle.



CSS


To create a triangle, manipulate the border property. Manipulating the width of the border will give you different results at rotational angles.



#triangle width: 0; height: 0; border-bottom: 140px solid #fcf921; border-left: 70px solid transparent; border-right: 70px solid transparent;


Triangle Down


triangle_down


HTML


To create an inverted triangle shape using CSS, create again a div with the ID name triangle_down.


 <div id="triangle_down"></div>

CSS


Creating an inverted triangle, we need to manipulate the border property of the bottom.



#triangle_down width: 0; height: 0; border-top: 140px solid #20a3bf; border-left: 70px solid transparent; border-right: 70px solid transparent;


Triangle Left


triangle_left


HTML


To create a triangle shape that faces left, set up again a div with the ID name triangle_left.


 <div id="triangle_left"></div>

CSS


Creating a triangle that faces left, manipulate the border property of the right side.



#triangle_left width: 0; height: 0; border-top: 70px solid transparent; border-right: 140px solid #6bbf20; border-bottom: 70px solid transparent;


Triangle Right


triangle_right


HTML


In order to create a triangle shape that faces right, set up a div with the ID name triangle_right.


 <div id="triangle_right"></div>

CSS


Creating a triangle that faces left, manipulate the border property of the left side.



#triangle_right width: 0; height: 0; border-top: 70px solid transparent; border-left: 140px solid #ff5a00; border-bottom: 70px solid transparent;


Diamond


diamond


HTML


To create a diamond shape using CSS, provide a div with the ID name diamond.


 <div id="diamond"></div>

CSS


Creating a diamond can be displayed in many ways. Using the transform property along with rotate value will enable to display two triangles next to each other.



#diamond width: 120px; height: 120px; background: #1eff00;
/* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
/* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px;

Trapezium


trapezium


HTML


In order to create a trapezium shape using CSS, set up a div with the ID name trapezium.


 <div id="trapezium"></div>

CSS


A trapezium can be displayed by setting up equal left and right border with a flat bottom.



#trapezium height: 0; width: 120px; border-bottom: 120px solid #ec3504; border-left: 60px solid transparent; border-right: 60px solid transparent;


Parallelogram


parralelogram


HTML


Creating a parallelogram shape using CSS will need a div with the ID name parallelogram.


 <div id="parallelogram"></div>

CSS


To create a parallelogram shape, set up a transform value of skew to turn the element in a 30 degree angle.



#parallelogram width: 160px; height: 100px; background: #8734f7; -webkit-transform: skew(30deg); -moz-transform: skew(30deg); -o-transform: skew(30deg); transform: skew(30deg);

Star


star


HTML


In order to create a star shape using CSS will need a div with the ID name star.


 <div id="star"></div>

CSS


Creation of a star is a strange manipulation of borders with the use of rotate value of transform. See code below.



#star width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg);
#star:before height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg);
#star:after content: ''; width: 0; height: 0; position: absolute; display: block; top: 3px; left: -105px; color: #fc2e5a; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg);


Star (6 points)


star-6pt


HTML


The markup for six points star shape using CSS will need a div with the ID name parallelogram.


 <div id="star_six_points"></div>

CSS


Unlike the regular star with five points, the six point star will be manipulated using the border properties. Create two sets of shapes and then combine them as one.



#star_six_points width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto;
#star_six_points:after content: ""; width: 0; height: 0; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid #de34f7; margin: 30px 0 0 -50px;

Pentagon


pentagon


HTML


To create a pentagon, set up a div with an id of pentagon.


 <div id="pentagon"></div>

CSS


Creating a pentagon needs two elements that go into creating one. First create a trapezoid shape and then add a triangle shape on the top of it.



#pentagon width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent;
#pentagon:before content: ""; height: 0; width: 0; position: absolute; top: -85px; left: -18px; border-width: 0 45px 35px; border-style: solid; border-color: transparent transparent #277bab;


Hexagon


hexagon


HTML


In order to create a hexagon, set up a div with an ID of hexagon.


 <div id="hexagon"></div>

CSS

There are different ways to create a hexagon. One way to create is almost identical like the creation of pentagon. First create a rectangular shape and then add two triangles on the top.



#hexagon width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto;
#hexagon:before content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e;
#hexagon:after content: ""; width: 0; height: 0; position: absolute; bottom: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 25px solid #fc5e5e;


Octagon


octagon


HTML


Creating an octagon, will require a div with an ID octagon.


 <div id="octagon"></div>

CSS


A octagon can be a hack too. First create two identical trapezoids and then put two triangles from each side. Although there are also some other ways to do this, this is the best way to do it.



#octagon width: 100px; height: 100px; background: #ac60ec; position: relative;
#octagon:before content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4;
#octagon:after content: ""; width: 42px; height: 0; position: absolute; bottom: 0; left: 0; border-top: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4;
}

Heart


heart


HTML


To create a heart shape CSS, let’s first create a div with an ID name of heart.


 <div id="heart"></div>

CSS


Heart shape can be hard to do but it can be done by rotating elements from different angles and changing the transform-origin property to enable the changing of the position on transformed element.



#heart position: relative;
#heart:before,#heart:after content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -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%;

Egg


egg


HTML


In order to create an egg shape CSS, first create a div with an ID name egg.


 <div id="egg"></div>

CSS


An egg shape is almost identical with the oval shape except that the height is a bit higher than the width and the radius is carefully manipulated to get a good result.



#egg width: 136px; height: 190px; background: #ffc000; display: block; -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

Infinity


infinity


HTML


To create an infinity shape in CSS, create a div with an ID name infinity.


 <div id="infinity"></div>

CSS


Infinity shape can be achieved by carefully manipulating the borders and setting the angle of the circle like shape.



#infinity width: 220px; height: 100px; position: relative;
#infinity:before,#infinity:after content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
#infinity:after left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);


Comment Bubble


comment-bubble


HTML


In order to create a comment bubble shape in CSS, create a div with an ID name comment_bubble.


 <div id="comment_bubble"></div>

CSS


A bubble comment shape can be created by creating a rectangle and giving it a border radius, then place a triangular shape like on the left side.



#comment_bubble width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px;
#comment_bubble:before content: ""; width: 0; height: 0; right: 100%; top: 38px; position: absolute; border-top: 13px solid transparent; border-right: 26px solid #088cb7; border-bottom: 13px solid transparent;


Pacman


pacman


HTML


To create a pacman shape in CSS, create a div with an ID name of pacman.


 <div id="pacman"></div>

CSS


Creating a pacman is a hack too. Just manipulate the border and the radius to create an opening on the left side of the circle.



#pacman width: 0; height: 0; border-right: 70px solid transparent; border-top: 70px solid #ffde00; border-left: 70px solid #ffde00; border-bottom: 70px solid #ffde00; border-top-left-radius: 70px; border-top-right-radius: 70px; border-bottom-left-radius: 70px; border-bottom-right-radius: 70px;


Final Words


There are a lot of advantages in using CSS shapes than putting images on your website. You can use shapes today as a part of your progressive workflow, though they have acceptable fallback in non-supporting browsers especially with the Jurassic IE browsers.


Though you can build shapes from scratch, there are some sites, I would recommend for you to see that generates CSS shapes for you. Check out the following sites.


And that’s really it. Hope you enjoyed this tutorial and let me know in comment section if you have any other way to create similar result like the CSS shapes you see in the demo.







Geen opmerkingen:

Een reactie posten