CSS
html, body {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #fd746c;
background: linear-gradient(to left, #fd746c , #ff9068);
overflow: hidden;
}
.heart {
width: 600px;
height: 600px;
transform: rotate(-45deg);
}
.heart__layer--1 {
width: 195px;
height: 50px;
background-color:#b63636;
transform: rotate(0deg) skew(-50deg);
position: absolute;
margin-left: 250px;
margin-top: 300px;
}
.heart__layer--2 {
height: 150px;
width: 78px;
background-color: #811919;
transform: rotate(-39deg) skew(-39deg);
position: absolute;
margin-left: 211px;
margin-top: 155px;
}
.heart__layer--3 {
width: 122px;
height: 49px;
background-color: #e16363;
transform: rotate(0deg) skew(-52deg);
position: absolute;
margin-left: 249px;
margin-top: 108px;
}
.heart__layer--4 {
width: 123px;
height: 59px;
background-color: #811919;
transform: rotate(90deg) skew(40deg);
position: absolute;
margin-left: 383px;
margin-top: 236px;
}
.heart__layer--5 {
width: 80px;
height: 61px;
background-color: #811919;
transform: rotate(90deg) skew(38deg);
position: absolute;
margin-left: 331px;
margin-top: 141px;
}
.heart__layer--6 {
width: 75px;
height: 55px;
background-color: #b63636;
transform: rotate(0deg) skew(-48deg);
position: absolute;
margin-left: 370px;
margin-top: 180px;
}
1 Response