Recreating an image in CSS with flexbox

General
1

I’m trying to recreate the “What I want” image’s navigation using CSS. What I have thus far is a DIV flexbox containing the top row (the dropdown menu), then another DIV containing six more DIVs for the navigation buttons. Right now there’s no fancy gradient or extra striping or anything, but I was able to get a triangle-like shape for the right side (see the “What I got” image), but…

  • The triangle doesn’t show up on the left
  • I don’t get the same “striping” effect as I have on the right; it shows up in the second box instead?
  • One of the images (between the fourth and fifth DIVs, I think) is too big and cuts off the border “divider” I want
  • The last image shows up in that wide block AFTER the triangle, when I wanted it to show up BEFORE the triangle and leave the blue stripes thin
2

I am afraid this forum really is the wrong place for such a question.

You might want to ask this over at StackExchange.

3 Likes
3

Out of the blue, it’s Flexbox day.

2 Likes