Geometry in CSS
With some divs and basic styling you can make some basic shapes… And with basic shapes? You can make the complex ones, like in geometry!
You maybe already know that with CSS you can make a lot of stuff, there are no real limits. Maybe only your patience to make things work. But geometry isn’t really that hard. For example, let’s start with the most basic shape: square and also maybe a rectangle:
.square {
width: 100px;
height: 100px;
background: #dd0000;
}
.rectangle {
width: 200px;
height: 100px;
background: #dd0000;
}
And all we did here was to use a div element on which we set a width, height and a background color to make it visible on page. For the square we width is equal to the height and for the rectangle I doubled the width.
But what if we make something less pointy? Yes, I am referring to a circle or an oval. And for that, let’s use the previous two shapes we already made:
.circle {
width: 100px;
height: 100px;
background: #00dd00;
border-radius: 100%;
}
.oval {
width: 200px;
height: 100px;
background: #00dd00;
border-radius: 100%;
}
This is so simple that all we have to add is the border-radius property. Based on that you can round an element corners, you can round them only to make the shape look smoother or comfy, or you can just increase the value and make them perfectly round. You don’t have to use the 100% value for this, works even with 99px. Actually, I have seen on a lot of websites the 99px or 999px instead of a percentage value. I prefer the 100% because it makes sense to me: “You want to round something? How much? With the maximum amount? So… It will become a circle?”.
Let’s move on and make some triangles. Now, for this shape there are some hacks. The hard way would be to use multiple squares, only one of the colors of the rectangle and with others and transform property try to hide half of it with squares of the background color. The good part here, is that there is an easier way to do it. We can use huge borders, and the code will look something like this:
.triangle1 {
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #0000dd;
}
.triangle2 {
border-left: 100px solid transparent;
border-bottom: 100px solid #0000dd;
}
If you have some questions like “How?” or “Why?” right now I can totally understand that. So, let’s break it to pieces. If we set a border with a big value, we can see how it actually works.
.border1 {
border-top: 50px solid cyan;
border-right: 50px solid magenta;
border-bottom: 50px solid yellow;
border-left: 50px solid black;
}
.border2 {
border-top: 50px solid cyan;
border-right: 50px solid magenta;
border-bottom: 50px solid yellow;
border-left: 50px solid black;
width: 50px;
height: 50px;
}
The border forms a triangle when the element ends. In this case our element is 0px width or height. If we make it bigger, let’s say 50px for width and height you will probably understand even better what happens. As you can see if the element has a size, the triangles are less pointy and more of a trapezoid. And that’s also how you can make a trapezoid if you would like to, based on the triangles made out of borders and some width and height.
Keep in mind the fact that you can also use the pseudo-classes :before or :after to generate some more complex shapes. For example an pentagon is made using :before like that:
.pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: brown transparent;
}
.pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent brown;
}
We use a trapezoid at its base and the top is made of an triangle with is created in :before. Both shapes have the same color and are aligned perfectly to make the illusion to be only one shape there.
What about something more challenging now? From school we know that a 3D object it's made of 2D shapes. We know how to make some 2D shapes so, let’s try to make an object. Let’s make a simple cube:
<div class="cube">
<div class="face front">Front</div>
<div class="face back">Back</div>
<div class="face right">Right</div>
<div class="face left">Left</div>
<div class="face bottom">Bottom</div>
<div class="face top">Top</div>
</div>.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
transform: rotateX(-45deg) rotateY(45deg);
}
.face {
position: absolute;
width: 100px;
height: 100px;
background-color: #333;
color: #fff;
text-align: center;
font-size: 25px;
line-height: 100px;
}
.front {
transform: translateZ(50px);
background-color: #666;
}
.back {
transform: translateZ(-50px) rotateY(180deg);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
.left {
transform: rotateY(-90deg) translateZ(50px);
background-color: #333;
}
.top {
transform: rotateX(90deg) translateZ(50px);
background-color: #444;
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
Here may be a lot of CSS only for a simple 3D form but, come on, we are working in 3 dimensions. For this view of the cube its enough if you make only half of it, bottom, back and right sides are not visible, those are there, but because of the cube position we can’t see them. If you want, you can copy all the code and try to make an animation in which the cube rotates, and you’ll see then all the sides.
On short we started with “.cube” and “.face” classes to make our template of how the cube should be and after that we only position all the sides to make them look like a cube based on transform. The transform property is so advance that I think I can write an article only about it but for now we only focus on rotate and translate. Rotate rotates the shape on a specific axis and translate moves it.
And now that you know how to make such things you may ask: “But why I need something like this in a website?” and my answer is: “Maybe you don’t”.
It's true that you can create nice custom elements like buttons or navbars with these forms, you can make some complex animations or even literal art with those (if you make a complex art piece only with CSS I would like to see it, there are people that made crazy stuff with it).
But also, you don’t have to use them. The nice thing about them is to know about them and if sometimes you will need to play a bit with some shapes you will know that CSS can do that.
I would like to offer you some biography to go deeper in the subject if you want but honestly, I don’t know a good website or book that explains all of this. So, your best bet is to search on Google something like: “How to make [shape] in CSS?” And you will probably find something useful.
My only recommendation would be the CSS section from MDN (Mozilla Web Docs) where you can go deep in all the CSS property and maybe you will find something interesting that you can use.
And with all of this said, stay creative out there.
