{"id":8256,"date":"2015-01-29T11:17:02","date_gmt":"2015-01-29T17:17:02","guid":{"rendered":"https:\/\/getflywheel.com\/?p=8256"},"modified":"2024-01-02T02:02:16","modified_gmt":"2024-01-02T08:02:16","slug":"create-shapes-css3","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-shapes-css3\/","title":{"rendered":"How to Create Shapes with CSS3"},"content":{"rendered":"\n
What can you create with CSS shapes? After all, you can add a variety of basic shapes to your CSS style sheet by simply by using a bit of CSS3 coding. Why not see how you can use them on your site?<\/p>\n\n\n\n
CSS shapes add interest to web pages. With browsers becoming increasingly more compatible, they can cut down on large, unnecessary images taking up space on your website. Changing colors and adjusting shapes could not be easier: Adjust a little CSS and watch your design take shape.<\/p>\n\n\n\n
Basic Shapes<\/h2>\n\n\n\n
Let\u2019s go over some simple shapes to start out. These are all fairly easy to use, but will still add some great visual interest to your site. The CSS is ready for you\u2014just copy and modify to fit your needs.<\/p>\n\n\n\n
Squares<\/h3>\n\n\n\n<\/figure>\n\n\n\n
Squares are arguably the easiest shape to make in CSS:<\/p>\n\n\n\n
If you\u2019d like a rectangle instead, simply adjust the width and height for either a horizontal or vertical rectangle.<\/p>\n\n\n\n
Circle<\/h3>\n\n\n\n<\/figure>\n\n\n\n
A circle class can be a refreshing alternative to the usual square and rectangle images we\u2019re so used to seeing across the internet. Here’s the CSS for a circle: <\/p>\n\n\n\n
If you prefer, the border radius can also be half of the width and height measurement. For example, because the width and height are 100px, we could also list the border-radius as 50px.<\/p>\n\n\n\n
Triangle<\/h3>\n\n\n\n<\/figure>\n\n\n\n
Let\u2019s not forget about our three-sided friend. The triangle differs from the square and circle in that we need to include border declarations for left, right, and bottom. Notice that the width and height are set to 0. The borders are doing all the work here. The left and right are transparent while the bottom is set to 100px.<\/p>\n\n\n\n
Let\u2019s compare a triangle that points up to one that points down. Most properties and values are the same in the two triangle examples. The one exception is the top border. We didn\u2019t need a top border for the .triangle-up<\/code> class, and for the .triangle-down<\/code> class we don\u2019t need a bottom border.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Now that we\u2019ve covered the basics, let\u2019s try working on some more complex shapes, like rhomboids, stars, and speech bubbles.<\/p>\n\n\n\n
Rhomboid<\/h3>\n\n\n\n<\/figure>\n\n\n\n
You may have to think back to Geometry 101, but a rhomboid is simply a parallelogram whose adjacent sides are unequal and whose angles aren\u2019t right angles. In other words, a skewed rectangle.<\/p>\n\n\n\n
The 20deg<\/code> refers to the tilt around the x-axis (the horizontal, if Geometry 101 is too far away). A margin-left of 25 is specified to allow for breathing room. If the shape is too far left, there is potential for it to be cut off. This ensures that the entire shape is included.<\/p>\n\n\n\n
Creating a star is the perfect way to illustrate your rockstar CSS skills! Keep in mind our triangle from earlier in this post. A star is essentially putting three of those triangles together. We’re illustrating this with three different colors.<\/p>\n\n\n\n
Looking at the code below, the .star-five<\/code> class is purple, which is the left part of the star. The rotation is what puts this into place. The :before<\/code> pseudo-element is what gives the star the red piece on top. The :after<\/code> pseudo-element is the green portion of the star. It\u2019s set to perfectly complete the shape.<\/p>\n\n\n\n
Want to add some dialog to your project? Sometimes a classic speech bubble is just what you need. Once again, the magic happens with the pseudo element.<\/p>\n\n\n\n
From squares to speech bubbles, CSS3 is making it possible to create all sorts of shapes in the browser. Once you learn the basics, you can use these concepts to create your own unique shapes. <\/p>\n\n\n\n
![\"square\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/square.jpg\")
<\/figure>\n\n\n\n![\"circle\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/circle.jpg\")
<\/figure>\n\n\n\n![\"triangle-up\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/triangle-up.jpg\")
<\/figure>\n\n\n\n![\"triangle-down\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/triangle-down.jpg\")
<\/figure>\n\n\n\n![\"rhomboid\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/rhomboid.jpg\")
<\/figure>\n\n\n\n![\"star\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/star.jpg\")
<\/figure>\n\n\n\n![\"speech-bubble\"](\"https:\/\/getflywheel-images.s3.us-east-2.amazonaws.com\/uploads\/2015\/01\/speech-bubble.jpg\")
<\/figure>\n\n\n\n