Submitted 7 months ago

Article preview component

Lucky Avbunufe•190

@Stanmancer

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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.

What specific areas of your project would you like help with?

is there a better way i could have done/gotten the shape of the box??

Community feedback

Aydan•420
@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 helpful
1
Lucky Avbunufe•190
@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
Rebeka•170
@BekiaDPosted 7 months ago
looks really cool with the animation
0
Lucky Avbunufe•190
@StanmancerPosted 7 months ago
@BekiaD

Thanks.
0

Please log in to post a comment

Join 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