Drawing unconventional shapes with CSS
Even with significant improvements to CSS specification over the years, slow adoption of the specification by browsers means that there is still a need for usage of tricks and “hacks” which allow the creation of unconventional shapes.
We are featuring some of the most important and interesting tricks which could be helpful for some of your future projects.
Drawing triangles using only CSS
One of the most used CSS tricks is a triangle, created using border property. Developers who come across this trick for the first time are often confused since the trick is fairly unintuitive. This trick can be very powerful, especially when “border” property is fully understood.
First of all, we have to gain a proper understanding of border property. The property is made of four sides (border-left, border-right, border-top, and border-bottom) which can be separately set. By setting one of the sides, the rectangle is formed. After setting one of the sides we get a rectangular shape by using exaggerated dimensions, and we can clearly see that on the following example:
However, if one of the adjacent sides is set, the previous rectangular shape turns into a trapezoid, which becomes more apparent if that side is set to some other color. It is important to note that it is possible to use transparent “color” which allows us to “cut” the rectangle, getting us closer to a triangular shape.
Once we set the width of the element to 0 we get a right-angled triangle. It is also possible to set another adjacent side of the border to transparent and by adjusting widths of those sides we can get many different types of triangles.
If we examine the step where we have set the width of the element 0, we will notice that it is also possible to use this trick to create trapezoid elements.
Following demonstration shows how flexible this method is:
While this trick can be useful, it is not without flaws. The most obvious one is the fact that this part of the element can not be used to hide content inside triangular shape using “overflow: hidden” property. It is also difficult to create outline shaped triangles with transparent “fill”.
Replacing DOM elements with shadows
There are many examples when elements on the page are exclusively visual. For the purpose of simplifying DOM tree, pseudo elements “before” and “after” are commonly used. However, this limits the number of elements to two.
When additional visual elements have the same shape, it is possible to use the box-shadow property as a replacement. While the main use case for this property is the addition of shadows for elements, it is important to note that the property can be used without blurred edges. The shadow can also be translated on x and y-axis. Combining this with relative units allows the creation of scalable objects.
An increasing number of shapes is achieved by adding more sets of values which is comma-separated from the previous set. It is important to note that even negative values can be used.
Other than manipulating offset (first two) values of the property, it should be noted that the manipulation of spread (third) value allows manipulation of the scale of the shape. By increasing the offset value the shape becomes larger, while negative values allow shrinking the shape.
This trick can be especially useful for CSS-only animations with multiple objects.
This trick has some drawbacks, mainly in the number of lines of CSS it which could be required for some use cases. Although, the use of precompilers (Sass, LESS) can alleviate these problems. Additionally, this trick has its limited number of shapes which can be used on - it’s mainly rectangular, rhomboid, and ellipsoid shapes.
There is also property “filter: drop-shadow” which can be used instead of box-shadow. However, there is a large difference in the way these properties behave because “filter: drop-shadow” is applied to both the HTML element and previously added shadows, meaning the number of shapes doubles every time another set of properties is added.
A few final words
These are just some of the tricks which can be used to help replace SVGs and images. Given that these are native properties of the CSS, it is possible to animate them and they can be adjusted for better website responsiveness.
However, with the more widespread adoption of emerging CSS properties, these tricks are going to be less relevant and they are probably going to be replaced by properties such as “clip-path”, which allows the creation of many different shapes.
Until then, we hope that our guide on drawing unconventional shapes with CSS will be useful to you.
