Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive with Css and Mediaqueries

#sass/scss

@roastgrammer

Desktop design screenshot for the Article preview component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


hey guys! I completed this challenge but my main question is about that pop up window, i could'nt make a shape like that if anyone can help me ,pls tell me about it

Community feedback

Byron 2,180

@byronbyron

Posted

Hello!

I prefer to use a pseudo element for the little triangle shape, which might look something like this:

#main-middle::after {
    content: '';
    display: block;
    height: 0;
    border-left: 0.75rem solid transparent;
    border-right: 0.75rem solid transparent;
    border-top: 0.75rem solid #48556a;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

The trick is the three borders, two of which are transparent 👌

1

@roastgrammer

Posted

@byronbyron hello dude! thanx for your response , I tried that and make a shape like that challenge ,:) I'm exciting for using this skill in my next project ! tnx again....

0

Please log in to post a comment

Log in with GitHub
Discord logo

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