Design comparison
Solution retrospective
The functionality of the share button.
What challenges did you encounter, and how did you overcome them?i was confused as to how i would obtain the shape of the share-links box
I used a basic clip path to get the triangle at the bottom of the share-links box.
clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
and then positioned it to match the design.
is there a better way i could have done/gotten the shape of the box??
Community feedback
- @AydanKaraPosted 7 months ago
is there a better way i could have done/gotten the shape of the box??
Instead of adding a new element I used after pseudo-element to insert content after the content of an element.
Here's what it would look like for you:
div#share-box:after { content: ""; position: absolute; bottom: 0; left: 50%; border: 12px solid transparent; border-top-color: var(--clr-dark-grayish-blue); border-bottom: 0; margin-left: -12px; margin-bottom: -12px; }
Marked as helpful1@StanmancerPosted 7 months ago@AydanKara
oh, i didn't think of that. Thanks a lot. But i think i would stick with clip-path instead of playing around with borders to get the triangle.
0 - @BekiaDPosted 8 months ago
looks really cool with the animation
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord