Submitted 11 months ago

HTML/CSS

oshaxgio• 60

@oshaxgio

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

This is a solution for...

Results summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

hello to everyone i'm new to this so advices would be aprecieited i built it using only html and css from my knowlege so there migth be many mistakes, i had to experiment with some things to make them work. i used position fixed so if someone has screen height less than 900px it migth not open fully for them

Community feedback

SecretariatV• 150

@SecretariatV

Posted 11 months ago

It looks like you haven't implemented a corner border effect on the child components of the right panel. This can be implemented using a mask. The following is example code.

--corner: conic-gradient(from -90deg at 15px 15px, red 25%, #0000 0) 0 0 / calc(100% - 15px) calc(100% - 15px) border-box;
--inner: conic-gradient(red 0 0) padding-box;
-webkit-mask: var(--corner), var(--inner);
mask: var(--corner), var(--inner);
-webkit-mask-composite: source-out;

https://github.com/SecretariatV/FM-Results-summary-component/blob/main/src/components/Right-card.tsx

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