Shapes in CSS

In this tutorial we go to learn about shapes in CSS. It can be used to make squares, triangles, circles, many other shapes. It can sometimes be beneficial to use it for simple shapes rather than relying on SVGs or images.

Square

The CSS square shape can be created by setting the width and height to equal values.

Example

HTML

<div class="square"></div>

create a div container with class name square.

CSS

.square {
  width: 64px;
  height: 64px;
  background: #5394fd;
}

Circle

The circle shape can be created by using border radius 50%. To create a circle shape the width and height must be the same.

Example

HTML

<div class="circle"></div>

CSS

.circle {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #5394fd;
  }

Ellipse

The ellipse shape can be created by two values for the border-radius and the width and height are different values.

Example

HTML

<div class="ellipse"></div>

CSS

.ellipse {
   width: 128px;
   height: 64px;
   border-radius: 64px / 32px;
   background: #5394fd;
}

Triangles

A triangle shape can be created by using three borders. The border-width should be the same for all borders, and the border that is opposite to the direction the triangle points should feature the desired border color. The borders next to it should have a transparent color.

Example

HTML

<div class="triangle-down"></div>
<div class="triangle-up"></div>
<div class="triangle-left"></div>
<div class="triangle-right"></div>

CSS

.triangle-down {
    width: 0;
    height: 0;
    border-top: 32px solid #5394fd;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
  }

  .triangle-up {
    width: 0;
    height: 0;
    border-bottom: 32px solid #5394fd;
    border-left: 32px solid transparent;
    border-right: 32px solid transparent;
  }

  .triangle-left {
    width: 0;
    height: 0;
    border-right: 32px solid #5394fd;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
  }

  .triangle-right {
    width: 0;
    height: 0;
    border-left: 32px solid #5394fd;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
  }

If you like, you can subscribe my youtube channel. I create awesome web contents. Subscribe

Thanks For reading.

Blog

Kaja Uvais

Square

Circle

Ellipse

Triangles

Join Our Newsletter. No Spam, Only the good stuff.

Related