KPC
Kevin Powell - Community•2y ago
curator

how can we create this one div?

12 Replies
curator
curatorOP•2y ago
just the reactangle with the dropdown
Chris Bolson
Chris Bolson•2y ago
It could be done in several ways. I would probably just add a pseudo element that was a yellow square, rotate it 45 degress and place it in th e middle at the bottom. https://codepen.io/cbolson/pen/VwVXQeq
curator
curatorOP•2y ago
no pseudo elements just with a single div cant use pseudo elements for some reason
Chris Bolson
Chris Bolson•2y ago
you could qchieve it with a clip-path
curator
curatorOP•2y ago
done with it but facing a problem now
curator
curatorOP•2y ago
curator
curatorOP•2y ago
the white background persists!
Chris Bolson
Chris Bolson•2y ago
updated my codepen with a clip-path version
curator
curatorOP•2y ago
hey can we connect for a minute? actually there is one more issue, which is the map which causing him this error if u can
Chris Bolson
Chris Bolson•2y ago
No, sorry. I don’t do chats.
curator
curatorOP•2y ago
actually got the styling resolved but now the animation is not working for some reason sure no worries this was before: 
    top: 0;
    left: 0;

0% {
    opacity: .5;
    top: 16px;
}

50% {
    opacity: .75;
    top: -6px;
}
100% {
    opacity: 1;
    top: 0;
}
    top: 0;
    left: 0;

0% {
    opacity: .5;
    top: 16px;
}

50% {
    opacity: .75;
    top: -6px;
}
100% {
    opacity: 1;
    top: 0;
}
now it is: 
top: 20px !important;
left: -5px !important;
top: 20px !important;
left: -5px !important;
what should be the updated animation?
Chris Bolson
Chris Bolson•2y ago
Can you provide more code? What are you trying to animate and in what way is it "not working"?

Did you find this page helpful?