Frontend Mentor - Fylo data storage component

This is a solution to the Fylo data storage component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

Overview

The challenge

Users should be able to:

• View the optimal layout depending on their device's screen size

Screenshot

Links

Demo

My process

Built with

• CSS
• Flexbox

What I learned

I'm happy with the way I made my triangle. I used ::after on the bubble.

.space-left-bubble::after {
    content: " ";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 15px;
    width: 15px;

    /* triangle part */
    --size-triangle: 20px;
    border-top: var(--size-triangle) solid white;
    border-left: var(--size-triangle) solid transparent;
    transform: translateY(var(--size-triangle));
}