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;
}
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;
}
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);
}
}
Top comments (0)