Submitted 5 months ago

Article preview component

Lucky Avbunufe• 190

@Stanmancer

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

HTML
CSS
JS

1newbie

View challenge

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

@AydanKara

Posted 5 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

Lucky Avbunufe• 190

@Stanmancer

Posted 5 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.

Rebeka• 170

@BekiaD

Posted 5 months ago

looks really cool with the animation

Lucky Avbunufe• 190

@Stanmancer

Posted 5 months ago

@BekiaD

Thanks.

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