How to Design with CSS Shapes: An Introduction (2023)

The basis of any website is the division of the page into smaller elements with content. The big problem with this for designers is that the content is always a rectangle. Screens are rectangular in shape and each division of it will be a rectangle. In this tutorial we will explore how to go beyond rectangular shapes by using the clip-path CSS property and rotation to make the design more interesting. For more ways to add interest to your designs, see our examples ofCSS-Animation(opens in new tab). If all this sounds like too much work, try a topwebsite builderinstead of this. But whatever your website needs, you need to find the right oneWeb-Hostingto you.

The simplest shape to start with is a circle or an oval. If you have a rectangle and set the total border radius to more than 50 percent you will get an oval, and if you start with a square you will get a circle since all sides are the same length. This is something you've probably done before, but it's a technique that's often underused in page design.

• 20 Best Wireframe Tools(opens in new tab)

A more complex solution is to create a triangle using CSS clip path to flatten the visible part of a div. A triangle is a fairly easy shape to create since it only has three points, but creating more complex shapes requires a visual clip path editor.

This tutorial will show you how to put all of these elements together, including gradients and rotating rectangles, to create a more unique design. Add CSS gradients and a complex geometric design can be created through CSS.

• Download the files for the tutorial from FileSilo(opens in new tab)

01. Get started

open thatStartfolder in your IDE code editor and start editing theindex.htmlbook page. A simple link to the Google Fonts fonts is required at the beginning of the tutorial so that later when text is inserted, the appropriate fonts can be added to the page.

<link rel="stylesheet" href="css/shapes.css"><link href="https://fonts.googleapis.com/css?family=Arvo:700|Lato:700" rel="stylesheet">

02. Anchor the shapes together

ImBodytag on the page add the following content. Theshape includedThe div tag is used to store all the different shapes that are generated and this is made to fill the browser viewport. The first shape to create is a simple circle that connects the other images together.

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

03. Create the page

Now switch to theCSSfolder and open theFormen.cssFile. The body and HTML are just set to populate the browser with the correct font family set up for most of the text that will be added as final touches towards the end of the tutorial.

body,html {margin: 0;padding: 0;width: 100%;height: 100vh;overflow-x: hidden;font-family: 'Lato', serifenlos;text-transform: largecase;}

04. Contain the shapes

The next CSS rule applies to the div with the id ofshape_contain. This is set to fill the browser with hidden overflow. Thetranslate3dis to ensure that the content is hardware accelerated. A wide frame is inserted in front of two background images. One is a regular image while the top one is an aqua semi-transparent gradient.

#shape_contain {box-sizing: border-box;width: 100%;height: 100vh;overflow: hidden;transform: translate3d(0, 0,0);border: 20px solid rgb(255, 254, 244);background: linear-gradient(0deg, rgba (7, 47, 46, 0.8) 0%, rgba(255, 252, 226, 0.5) 100%), url(../images/mountain.jpg) no-repeat center center; Hintergrundgröße: Cover;}

05. Start with a circle

The first geometric shape that is created is one of the simplest shapes. A circle can be made from any squaredivby adding an edge radius of50%. The circle is semi-transparent with a soft shadow added around the edge.

#circle {width: 80vh;height: 80vh;border-radius: 50%;background: rgba(136, 239, 231, 0.3);position: absolute;top: 7vh;left: 50%;transform: translate3d(-50 %, 0, 0);Box-Schatten: 0px 5px 40px rgba(0, 0, 0, 0.3);}

06. Try a triangle

The next shape will be a bit more complex because it's a triangle. It's relatively easy to create using the CSS clip path which can be used to create a polygon shape. Add this div in theshape_containdiv.

<div id="tri1"></div>

07. Apply the triangle

Here thisclip pathis created for the CSS to create the triangle. The shape is simply three dots. The background image is added and a filter is added here so that the hue can be shifted slightly, giving the image a slight pink tint accentuated by the contrast.

#tri1 {clip-path: polygon(0 0, 100% 0, 50% 100%);width: 100vh;height: 88vh;background: url(../images/girl3.jpg) no-repeat center center;background -size: coverage;position: absolute;top: 10vh;left: 50%;transform: translate3d(-50%, 0, 0);filter: hue-rotate(310°) contrast(140%);opacity: 0, 8th;}

08. Become more complex

The next shape to create is a triangle with a hole in the middle. This sounds relatively simple, but the clip polygon needs to be one solid line, so it's more complex to create. If you need to create a similar shape, useBennett Feelys Clip-Path-Ersteller(opens in new tab)to create the shape.

<div id="tri2"></div>

09. Stack the shapes

The shape here is more complex as it was created visually in the link mentioned earlier. The cloud image is placed into the shape and then the hue is adjusted to make it a little more yellow. Each shape is positioned absolutely in the center of the containing div and stacked on top of each other.

#tri2 {clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100 %, 50% 0);width: 80vh;height: 70vh;background: url(../images/clouds.jpg) no-repeat center center;background-size: cover;position: absolute;top: 1vh;left: 50%; Transform: translate3d (-50%, 0, 0); Filter: Hue Rotate (90 degrees) Contrast (140%); Opacity: 0.7;}

10. Try resizing the browser

The next triangle should be added inshape_containdiv. If you check the browser you will see that you can resize the browser and the shapes will fit perfectly as they are based on percentages. The container is set with the viewport height so that it always fits the screen.

<div id="tri3"></div>

11. Style it up

The last triangle has the same shape as the previous one with the hole in the middle. This time it has only a simple shade of turquoise and no image. The transparency is set low to be able to see through this triangle to the other content below.

#tri3 {clip-path: polygon(50% 0, 0% 100%, 9% 100%, 50% 17%, 50% 17%, 85% 91%, 13% 91%, 0 100%, 100% 100 %, 50% 0);width: 80vh;height: 70vh;background: rgba(0, 113, 110, 0.2);position: absolute;top: 20vh;left: 50%;transform: translate3d(-50%, 0 , 0);}

12. Create an angled strip

The next shape is an angled div shape. This is placed between triangle one and two in theshape_containdiv tag. Blend it into the page across the screen with a semi-transparent gradient. These are also scaled up and down to fit different sized screens.

<div id="strip1" class="strip"></div>

13. Make the angles

ThestripesClass sets the background gradient. This is done using the online history editorCSS history(opens in new tab). The ID then establishes the location of that particular angled gradient shape. It's placed in the center and then slightly offset to maintain consistent placement across different monitors.

.strip { position: absolute; Background: linear gradient (0 degrees, rgba (164, 0, 217, 0) 0%, rgba (164, 0, 217, 0.3) 35%, rgba (255, 67, 134, 0.3). ) 65%, rgba (255, 67, 134, 0) 100%; }#strip1 {width: 20vh; Height: 120 vh; left: 50%; transform: translate3d (-175%, -15%, 0) rotateZ (30 degrees); }

14. Try more pitch angles

Now two more div tags are added containing the class ofstripes. The ID allows them to be placed in different positions on the screen. These are used as repeating shapes that build up the overall aesthetic of the scene while adding a pop of color.

<div id="strip2" class="strip"></div><div id="strip3" class="strip"></div>

15. Position the angle

The two stripe angle gradient shapes are positioned on each side of the main content on the screen. One is placed on the bottom left and the other on the top right to balance the screen. Resize the browser to keep these elements in place on the screen and adjust them.

#strip2 {width: 5vh;height: 90vh;left: 50%;transform: translate3d(60vh, -15%, 0) rotateZ(30deg);}#strip3 {width: 5vh;height: 90vh;left: 50%; transform: translate3d(-70vh, 25%, 0) rotateZ(30deg);}

16. Add some text content

This page doesn't have a huge amount of text content, but the divs here have all the remaining page content that needs to be placed on the screen. The divs should be added before the closing div tag of theshape_containBlackboard. These text elements are divided into different corners.

<div id="leftside">Go Beyond the Rectangle</div><div id="rightside">Responsive Shape Layouts</div><div id="topLeft">Web Designer<br><span>CSS -Toolkit</span></div><div id="topRight">2019</div><div id="headline">CSS Shapes</div>

17. Rotate the text

The left-side div is positioned absolutely on the left side of the screen and rotated 90 degrees counterclockwise to fit the page. The transform origin is shifted slightly to make the text fit closer to the edge of the screen.

#leftside {position: absolute;left: 20px;top: 70%;transform-origin: 10% 0%;transform: rotation(-90deg);}

18. Position the right text

The right text is very similar to the left text except that it is positioned over the right side of the screen. The rotation should be slid around clockwise so that the text fits better and is easier to read on the right side of the screen.

#rightside {position: absolute;right: 20px;top: 70%;transform-origin: 90% 0%;transform: rotation(90deg);}

19. Stylize the text

Now the text for the upper left corner is stylized. The first two words are left at their default size, while the remaining words are enlarged and positioned down the next line to give some hierarchy to the text. This gets stuck in the top left corner every time you resize it.

#topLeft {position: absolute;left: 40px;top: 40px;width: 180px;text alignment: center;}#topLeft span {font-size: 1.8em;}

20. Set the right text

The text for the upper right corner is now set. This will be set in a black round circle with the text set in white against the circle. This uses the line height method to center align the text by using the line height equal to the div height.

#topRight {position: absolute;right: 35px;top: 25px;line-height: 100px;font-size: 1.4em;width: 100px;height: 100px;background: #000;color: #fff;text-align: center;border-radius: 50%;}

21. Set the heading text

The very last text to set is the main heading in the middle of the screen. For this, the font is changed and given a light pink semi-transparent color to blend with the highlight color of this page design. Save the page and refresh your browser to see the finished result. Would you like to save or share a copy of the page? Export it as a PDF and save it inCloud storage.

#headline {position: absolute;width: 100%;z-index: 200;padding-top: 65vh;font-family: 'Arvo', serif;text-align: center;color: rgba(233, 173, 255, 0.8);Schriftgröße: 8vw;Textschatten: 0px 3px 50px rgba(0, 0, 0, 0.5);}

This article was originally published in Creative Web Design Magazine web designer(opens in new tab). (opens in new tab)Buy Issue 284(opens in new tab)or (opens in new tab)subscribe to(opens in new tab).

Continue reading:

• Start with CSS art(opens in new tab)
• 5 Cool CSS Grid Generators(opens in new tab)
• A web designer's guide to CSS methodologies(opens in new tab)

subjects

Related Articles

• The Best Website Builder in February 2023
• The best 4K monitors 2023: Top UHD displays
• Adobe Creative Cloud Discount: The best Photoshop deals and more
• The best Apple Pencil cases