Skip to content
Submitted over 3 years ago

Basic HTML and CSS

Athreya G•410
@AthreyaG4
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Fylo data storage component
  • HTML
  • CSS
2junior

Design comparison

SolutionDesign

Solution retrospective

I couldn't make the floating box like the way it was in the design. Its bottom left border radius is off. Give me some suggestions on how to achieve this. Thanks

Community feedback

  • Veronika Palto•305
    @JepardMayPosted over 3 years ago

    Hello, I have a suggestion for the floating block. You can use a pseudo-element for the triangle and use a clip-path on it and not on the main element. It will be looking like this https://gyazo.com/c153b108adff036e60ec445ee8191b84 . Also, to make the background image looks more like in the design, you can change "background-size" to "contain" and "background-position" to "center bottom".

    Marked as helpful
    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