Making shapes in CSS

This started with a CSS tricks article and a youtube video by Web Dev Simplified in which they made basic shapes with CSS. I decided to repliate vector app icons.

For this project, I tried to replicate some brand and app logos in HTML and CSS. You can check out the project here.

The project uses CSS custom properties to make sizing easier along with calc() to make everything scale to the desired size.

:root {
	--logo-size: 200px;
}

.logo {
	height: var(--logo-size);
	width: var(--logo-size);

	/* border using calc */
	border: calc(var(--logo-size) * 0.03) solid #ccc;
	border-radius: calc(var(--logo-size) * 0.15);
}

The calc() function in css allows us to calculate things. It is a great tool to help out with making things in css. You can learn more about the calc() function here which is a video by YouTuber Kevin Powell, his channel is a great resource for CSS.

The other thing that was interesting is the creation of basic shapes in css such as a triangle, trapezium, etc which is well explained in this CSS tricks article.

For example you can use borders to create triangles (this with create an upward facing triangle):

.triangle {
	width: 0;
	height: 0;
	border: 100px solid transparent;
	border-bottom: 100px solid red;
}

The setting width and height to “0” is super important since otherwise it will not look like a triangle. Move the slider below to see the border thickness chnage.

This is why you can use borders as triangles.

There was also one more trick I used pertaining to gradients where you can get a hard stop to a gradient when the end of another colour is the start of the next one.

.gradient-hard {
	width: 100px;
	height: 100px;
	background-image: linear-gradient(green 20%, blue 20% 60%, white 60%);
}

You can also do that same with radial-gradient and it can create hard stops between 2 circles. Since a gradient is a background-image, you can play around with the background-position and background-size properties as well to create patterns with it.

Border radius is also something you can mess with to create a leaf-like shape, you can play around with the unit either an absolute unit(px) or a relative unit(%).

These are maily the things I used for this project. There are many other creative ways to have fun with CSS.

Hope you had fun reading this article and have a great day!