DEV Community

loading...

CSS Shapes with Animation

gvinod1991 profile image Godti Vinod ・2 min read

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%; 
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

Forem Open with the Forem app