.drop-shadow {
filter: drop-shadow(5px 5px 15px #388BDF);
}
.clip-blue-polygon{
top:-0.3125rem;
left:-0.1875rem;
background: linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A);
clip-path: polygon(0 0, 100% 0%, 71% 100%, 0% 100%);
border-radius: .75rem;
}
.clip-smaller-polygon{
top:-0.3125rem;
left:-0.1875rem;
background: linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A);
clip-path: polygon(0 0, 30% 0%, 71% 100%, 0% 100%);
border-radius: .75rem;
}
.clip-mirror-polygon{
transform: scaleX(-1);
top:-0.3125rem;
left:-15rem;
background: linear-gradient(125deg, #3787DA, #388BDF, rgb(80, 52, 134), #573E8A);
clip-path: polygon(0 0, 30% 0%, 71% 100%, 0% 100%);
border-radius: .75rem;
}
.drop-shadow-test {
filter: drop-shadow(5px 5px 15px rgb(163, 23, 65));
}
.clip-smaller-polygon-test{
top:-0.3125rem;
left:-0.1875rem;
background: linear-gradient(125deg, rgb(240, 138, 170), rgb(209, 64, 108), rgb(218, 22, 80), rgb(206, 14, 72));
clip-path: polygon(0 0, 50% 13%, 71% 80%, 0% 100%);
border-radius: .75rem;
}
.clip-mirror-polygon-test{
transform: scaleX(-1);
top:-0.3125rem;
left:-15rem;
background: linear-gradient(125deg, rgb(240, 138, 170), rgb(209, 64, 108), rgb(218, 22, 80), rgb(206, 14, 72));
clip-path: polygon(0 0, 50% 13%, 71% 80%, 0% 100%);
border-radius: .75rem;
}
.drop-shadow-second {
filter: drop-shadow(5px 5px 15px rgb(126, 26, 180));
}
.clip-smaller-polygon-second{
top:-0.3125rem;
left:-0.1875rem;
background: linear-gradient(125deg, rgb(186, 26, 180), rgb(121, 15, 143), rgb(116, 42, 155), rgb(100, 42, 155));
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
border-radius: .75rem;
}
.clip-mirror-polygon-second{
transform: scaleX(-1);
top:-0.3125rem;
left:-15rem;
background: linear-gradient(125deg, rgb(186, 26, 180), rgb(121, 15, 143), rgb(116, 42, 155), rgb(100, 42, 155));
clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
border-radius: .75rem;
z-index: -1;
}
.fadeInLeft:nth-child(1){
animation-delay: .1s !important;
}
.fadeInLeft:nth-child(2){
animation-delay: .2s !important;
}
.fadeInLeft:nth-child(3){
animation-delay: .3s !important;
}
.fadeInLeft:nth-child(4){
animation-delay: .4s !important;
}
.fadeInLeft:nth-child(5){
animation-delay: .5s !important;
}
@keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-100%, 0, 0); }
50% {
opacity: 0;
transform: translate3d(-50%, 0, 0); }
100% {
opacity: 1;
transform: translate3d(0, 0, 0); } }
.drop-shadow-rotate {
filter: drop-shadow(5px 5px 15px rgb(170, 43, 141));
}
.clip-smaller-polygon-rotate{
top:-0.3125rem;
left:-0.1875rem;
background: linear-gradient(125deg, rgb(221, 43, 141), rgb(190, 43, 141), rgb(170, 43, 141), rgb(150, 43, 141));
clip-path: polygon(0 0, 45% 0%, 100% 100%, 0% 100%);
overflow: hidden;
}
.clip-smaller-polygon-rotate::after{
content: '';
position: absolute;
top: -50%;
right: -50%;
bottom: -50%;
left: -90%;
background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255,255,255,0.5) 50%, rgba(229, 172, 142, 0));
transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.clip-smaller-polygon-rotate:hover::after, .clip-smaller-polygon-rotate:focus::after {
animation: sheening 1s forwards;
}
@keyframes sheening {
100% {
transform: rotateZ(60deg) translate(1em, -9em);
}
}