could anyone give me some guidelines how could I create these stairs using only CSS and HTML?
image in thread
8 Replies
You could use grid for this. Divide the grid in 3 rows and 4 or 5 columns (the image doesn't seem to be evenly distributed) and color the border that you want (top, right,... etc) on the nths childs of the grid
Alternatively, make the element relative with a border red. Then create three child elements positioned as absolute with the width and height, border styles and position them accordingly
Joao, thank you so much
I just had the rubber duck effect while explaining what I want to someone
this is what I came up with, if you are interested:
I could follow up this with a codepen when I'm done
but basically I'm going to use grid-template-areas to achieve the design above
Or perhaps as a background image.
i guess it depends what you are ultimately trying to achieve here but the background lines scream SVG to me. And I promise that it's not difficult to draw 5 lines in SVG
Without much context, I have to agree that an image is probably the easiest option. If you plan to make each area clickable or as a placeholder for some content, then grid.
Or that actually, I never remember to use svg for anything else than icons 😄
in fact, here is a hand written SVG starter pack to play around with. https://codepen.io/jsnkuhn/pen/LYrjWbO