CSS Shapes - Lena Design

With CSS you can create a lot of shapes. Learn how to create different shapes using pure CSS.

Let’s start from the easy ones:

Square

.square {
      width: 100px;
      height: 100px;
      background: #2a9d8f;
    }

Output:

2. Rectangle

.rectangle {
      width: 200px;
      height: 100px;
      background: #2a9d8f;
    }

Output:

3. Circle

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

Output:

4. Triangle

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

Output:

5. Trapezoid

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

Output:

A bit more difficult shapes:

Star

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

Output:

2. Diamond

<!DOCTYPE html>
<html>
<head>
<style> 
.diamond {
	  position: relative;
      border-style: solid;
      border-color: transparent transparent lightblue transparent;
      border-width: 0 25px 25px 25px;
      height: 0;
      width: 50px;      
  
    }
    .diamond:before {
      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;
    }
	
</style>
</head>
<body>

<div class="diamond"></div>

</body>
</html>

Output:

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%;
    }

To see more CSS shapes click here.

Enjoy coding!

CSS border-radius property

CSS Egg Shape and CSS Easter eggs

CSS Paper Plane Animation

Share this: