Skip to content
Submitted almost 4 years ago

One small problem.

Alex•310
@AlexGanderton
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 quite figure out how to get the little triangle on the bottom of the storage left area. My guess would be to use an svg of sorts but I'm not quite sure. If anyone has a way of doing it, any feedback will be greatly appreciated!

Community feedback

  • Dave•5,295
    @dwhensonPosted almost 4 years ago

    This article explains how to do it and what's going on when you apply the code suggested above: https://css-tricks.com/snippets/css/css-triangle/

    1
    Alex•310
    @AlexGandertonPosted almost 4 years ago

    @dwhenson Ah OK thank you this is so helpful!!

    0
  • Atharva Shandilya•160
    @Atharva-ShandilyaPosted almost 4 years ago

    You can create a triangle purely using css. I think you can use something like this.

    width: 0px;

    height: 0px;

    border-left: 100px solid transparent;

    border-right: 100px solid transparent;

    border-bottom: 150px solid white;

    You can adjust the size of the triangle by changing the border-width.

    0
    Alex•310
    @AlexGandertonPosted almost 4 years ago

    Ah I see I will try that on next attempt. Thanks!

    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