HTML CSS - CSS Shapes

Creating and using CSS shapes

CSS allows you to create a variety of shapes without using images. This tutorial covers advanced techniques for creating and using CSS shapes, including circles, ovals, triangles, rectangles, diamonds, and hexagons.

Circle

A circle can be created using the border-radius property. Here is an example:

.circle {
    width: 100px;
    height: 100px;
    background-color: #3498db;
    border-radius: 50%;
}
            

Oval

An oval can be created using the border-radius property with different width and height. Here is an example:

.oval {
    width: 150px;
    height: 100px;
    background-color: #2ecc71;
    border-radius: 50%;
}
            

Triangle

A triangle can be created using the border property. Here is an example:

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #e74c3c;
}
            

Rectangle

A rectangle is a simple shape that can be created using width and height properties. Here is an example:

.rectangle {
    width: 200px;
    height: 100px;
    background-color: #f39c12;
}
            

Diamond

A diamond shape can be created using the transform property to rotate a square. Here is an example:

.diamond {
    width: 100px;
    height: 100px;
    background-color: #8e44ad;
    transform: rotate(45deg);
}
            

Hexagon

A hexagon can be created using the ::before and ::after pseudo-elements. Here is an example:

.hexagon {
    width: 100px;
    height: 55px;
    background-color: #d35400;
    position: relative;
}

.hexagon::before,
.hexagon::after {
    content: "";
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon::before {
    bottom: 100%;
    border-bottom: 27.5px solid #d35400;
}

.hexagon::after {
    top: 100%;
    border-top: 27.5px solid #d35400;
}
            

Summary

In this tutorial, you learned how to create and use CSS shapes. You explored creating circles, ovals, triangles, rectangles, diamonds, and hexagons using various CSS properties. Understanding and applying these techniques will enhance your ability to create visually engaging web designs, allowing you to incorporate a variety of shapes without relying on images.