how can we create this one div?

12 Replies

curatorOP•17mo ago

just the reactangle with the dropdown

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

curatorOP•17mo ago

no pseudo elements just with a single div cant use pseudo elements for some reason

Chris Bolson•17mo ago

you could qchieve it with a clip-path

curatorOP•17mo ago

done with it but facing a problem now

curatorOP•17mo ago

curatorOP•17mo ago

the white background persists!

Chris Bolson•17mo ago

updated my codepen with a clip-path version

curatorOP•17mo 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•17mo ago

No, sorry. I don’t do chats.

curatorOP•17mo 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•17mo ago

Can you provide more code? What are you trying to animate and in what way is it "not working"?

Gaming

Programming

how can we create this one div?