CSS Shapes with Animation
Tags: css, animation, shapes
Published: 2019-09-15 05:13:20


You can do wonders with simple CSS properties in the designing world.for example you can create a simple arrow symbol or heart with beating. So let's learn how to create different shapes in CSS and add animation property to shapes that are created.


## Circle

To create a circle, we have to first create div element and assign width and height CSS property. Add some background color and make border-radius 50%.

    .circle{
       width:100x;
       height:100px;
       background:#159AC1;
       border-radius:50%; 
    }

## Rectangle 

To create a rectangle, We have to create a div element and assign width and height CSS property. Add some background color to make more clearly visible.

    .rectangle{
       width:100x;
       height:50px;
       background:#159AC1;
    }

{% codepen https://codepen.io/GodtiVinod/pen/PoYBNae %}

## Triangle 

To create a triangle shape, we have to user border property as with position: absolute. See the CSS code below.

    .triangle-up{
        position: absolute;
        border-right: 20px solid transparent;
        border-left: 20px solid transparent;
        border-bottom: 20px solid tomato;
    }

    .triangle-down{
        position: absolute;
        border-top:20px solid tomato;
        border-left:20px solid transparent;
        border-right:20px solid transparent;
    }

    .triangle-right{
        position:absolute;
        border-right:20px solid tomato;
        border-top:20px solid transparent;
        border-bottom:20px solid transparent;
    }

    .triangle-left{
        position: absolute;
        border-left: 20px solid tomato;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
    }

{% codepen https://codepen.io/GodtiVinod/pen/dybjXRe %}

## Quarter Moon

To create the quarter moon, First, create circle white background and apply box-shadow

    .quarter-moon {
        position: relative;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 10px 10px 0 0 pink;
    }

## Heart

To create a heart shape, We should use pseudo-class before and after. We used scale rotate & scale transform properties in animation keyframe to show heartbeat

    .heart{
            position: relative;
        }

    .heart:before {
        content: "";
        position: absolute;
        width: 50px;
        height: 75px;
        left: 0px;
        border-radius: 50px 50px 0 0;
        background: pink;
        transform: rotate(-45deg);
        animation: heart-pump 1s infinite;
    }

    .heart:after {
        content: "";
        position: absolute;
        width: 50px;
        height: 75px;
        left: 20px;
        border-radius: 50px 50px 0 0;
        background: pink;
        transform: rotate(45deg);
        animation: heart-pump-1 1s infinite;
    }

Adding heart-beat animation

    @keyframes heart-pump {
        to {
            transform: rotate(-45deg) scale(1.2);
        }
    }

    @keyframes heart-pump-1 {
        to {
            transform: rotate(45deg) scale(1.2);
        }
    }

{% codepen https://codepen.io/GodtiVinod/pen/KKPBMGg %}