Categories
CSS Web development

CSS Shapes

With CSS you can create a lot of shapes. Today I’ll show you how to create different shapes using pure CSS.

Let’s start from the easy ones:

  1. Square
.square {
      width: 100px;
      height: 100px;
      background: blue;
    }

2. Rectangle

.rectangle {
      width: 200px;
      height: 100px;
      background: blue;
    }

3. Circle

.circle {
      width: 100px;
      height: 100px;
      background: blue;
      border-radius: 50%;
    }

4. Triangle

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

5. Trapezoid

    .trapezoid {
      border-bottom: 100px solid blue;
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      height: 0;
      width: 100px;
    }

A bit more difficult shapes:

  1. Star
.star {
      top: 50px;
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellow;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    .star:before {
      border-bottom: 80px solid yellow;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    .star:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid yellow;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

2. Diamond

.diamond {
      border-style: solid;
      border-color: transparent transparent lightblue transparent;
      border-width: 0 25px 25px 25px;
      height: 0;
      width: 50px;
      box-sizing: content-box;
      position: relative;
      margin: 20px 0 50px 0;
    }
    .diamond:after {
      content: "";
      position: absolute;
      top: 25px;
      left: -25px;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: lightblue transparent transparent transparent;
      border-width: 70px 50px 0 50px;
    }

3. Heart

.heart {
      position: relative;
      width: 100px;
      height: 90px;
    }
    .heart:before,
    .heart:after {
      position: absolute;
      content: "";
      left: 50px;
      top: 0;
      width: 50px;
      height: 80px;
      background: red;
      border-radius: 50px 50px 0 0;
      transform: rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after {
      left: 0;
      transform: rotate(45deg);
      transform-origin: 100% 100%;
    }

Valentine’s day is coming so as a bonus, I’ll show you what will happen when you add scale transform to your heart code.

Add wrapper to your HTML code:

<div class="heart-wrapper">
  <div class="heart"></div>
</div>

and add a heart-wrapper element and the hover to CSS:

.heart-wrapper {
  cursor: pointer;
  
  width: 200px;
  height: 160px;
  transition: transform 0.3s cubic-bezier(.25, .8, .25, 1);
}
.heart-wrapper:hover {
  transform-origin: 50% 50%;
  transform: scale(1.3);
}

And you’ll get:

Enjoy coding!

Leave a Reply

Your email address will not be published. Required fields are marked *