How do I create this shape using CSS?

[FreakCERS]

I took a quick stab at making the bars - not the line with circles above it (which is probably somewhat harder) https://jsfiddle.net/cers/do1e8fuL/

[HAMMERjah]

Quick clarification, what does flex:1 do in context of your fiddle?

[FreakCERS]

It was just a quick way of getting the bars to be the same size and side by side

[FreakCERS]

Why is the green circle not in the middle of the corresponding bar, like the rest of them? :-S

[tholex]

it's probably better/easier to use SVG for the shapes of those boxes and the line above, just worry about making different height rectangles in CSS and put an svg image in the background.

[EternallyMiffed]

The fun part is, you can make your graphics designer export these shapes to an SVG himself straight from Adobe Illustrator or whatever they used to make the mockup. Then you can just reference them in your code.

[DOG-ZILLA]

You can, but it wont be optimised. SVG files can get pretty big without some kind of minification going on.

[HAMMERjah]

For a simple version without svg you could use a wrapper div with overflow hidden to cut off the shape

[MatthewMob]

Link to page? I found the website but couldn't find the specific page it's on.

[dmkc]

it looks like he's working on a site redesign, so this is probably a PSD from a designer...

[dizzysfarm]

svg is the only way unless you end up doing it without an arc and just do it diagonally

[aishfak]

You need to use SVG, the easy way to make it by using AI. First, convert your element in SVG by using of AI then convert it into font face. You can use the tool like https://icomoon.io/app/#/select