Skip to content
Submitted about 1 year ago

HTML/CSS

oshaxgio•60
@oshaxgio
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Results summary component
  • HTML
  • CSS
1newbie

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
    @SecretariatVPosted about 1 year 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

    0

Please log in to post a comment

Log in with GitHub

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