Check them out and play with the code for each one if you are interested in learning how they are made. There is a long compilation of different shapes created using CSS only on CSS-Tricks. You come from realms of unimaginable power and light, and you will return to those realms. Many complex shapes can be created using these CSS properties in combination with others. See the Pen Adobe CSS vs SVG – Arbitrary Shapes by Sara Soueidan ( on CodePen. The best way to learn something is to break it. If you change the position of the pseudo-elements (the left property for each one), you will be able to separate them and see what is happening. The best way to visualise this is to play with the code in the following live demo. Each pseudo-element is rounded on one side but not the other, and then they are positioned so that they overlap and make up the shape heart. Using the border-radius property, for example, you can create a heart shape by using the two pseudo-elements of an empty div. Hover over the div to see it collapse and the triangles form. You can play with the above example here. So, if you want a triangle pointing up, you keep the border-bottom property value and change the color of the remaining border-* properties to transparent.
Thus, by taking two simple steps in CSS, you can create triangular shapes using nothing but a few lines of CSS, and then you can pick whichever triangle you want and remove the remaining ones by giving them a transparent color. The following animated image shows this in action: That is, you will get the visual appearance of the shapes you want, but the shapes themselves are practically fake shapes created by mixing different “atomic” elements which are rectangular or circular, and positioning them in a way such that the end shape is achieved.įor example, using the CSS border-* properties, you can create a triangular shape pointing in one of the four main directions by simply adding a border to an element, and then collapsing the element’s height and width, and finally hiding the resulting triangles that you don’t want by giving them a transparent color. Using properties like box-shadow, border-radius and other border properties with a few HTML elements or pseudo-elements, you can render different geometric shapes on a page. The other type of CSS shapes - not to be confused with the CSS Shapes mentioned above - is the geometric shapes created using different CSS properties that were not intended for such creative creations.
We will talk about how to do this in an upcoming section. But even though the content flows inside or around these elements in non-rectangular areas, the elements themselves are still rendered rectangular, unless you take further steps to change that. Images and text are all rectangular and the text flows in rectangular areas.Ī couple of years ago, a new specification called CSS Shapes was introduced, which enables us to specify non-rectangular shapes (like circles, ellipses and polygons) and have text flow in or wrap around these shapes, thus breaking the rectangular flow limitations and bringing web design closer to what is possible in print design.ĬSS Shapes (the specification) however does not enable us to create elements that look and are rendered as arbitrary shapes-it only affects the flow of content around an element, and a future module might enable changing content flow inside an element as well. entities, characters and codes with ASCII, HEX, CSS and Unicode values. Every element is governed by a rectangular box model. We’ll start with an overview of what CSS is capable and incapable of in terms of creating non-rectangular geometric shapes… The Shapes of CSSĮverything in HTML and CSS is a rectangle. Specifically, we will be talking about how to create circular menus, as these are the perfect example of usable non-rectangular UI elements. In this article, we are going to go over techniques for creating arbitrarily-shaped UI components using CSS properties and SVG’s capabilities, and a mix of both! In the first two articles of this series, we compared CSS and SVG techniques for creating graphical text effects and ways to style (and animate) HTML checkboxes and radio buttons, respectively. SVG: Shapes and Arbitrarily-Shaped UI Components A modern web browser that supports border-image, linear-gradient, radial-gradient, and conic-gradient.įirst, consider a box class that establishes some dimensions and centers the content.
You may benefit from How To Build a Website With CSS tutorial series if you need a refresher. Some familiarity with CSS is required.If you would like to follow along with this article, you will need: In this article, you will explore border-image-source and border-image-slice. Now, modern web browsers allow you to use border images and gradient borders. This allowed you to set border-style, border-color, and border-width. You may have used CSS borders in your projects.