How to create a custom shape - css

Question

I would like to create a custom shape like this image :

how can I do ?

Answer 1

You could skip the CSS and use svg:

Plunker

HTML:

Note that if you need rounded on corners, svg polygons can be tricky as they do not inherently have an attribute similar to border-radius. You can set stroke-linejoin="round" and then adjusting the stroke width attribute to adjust how much it rounds. This works good for solid shapes where you can set the stroke color the same as the fill, or if you can have a border of a different color.

HTML: