Slanted (Skewed) Rounded Border Header Background.. Sorry!

[elmac2899]

Sorry for the horrible description, but frankly thats as best as I can do.

I’ve received a PSD from my designer and frankly Im stumped as to the best way to achieve this via CSS.

Here’s the image (referring to the gradient slanted rounded cornered blue box).

https://imgur.com/a/ljipANX

Note that this is the header and I imagine some form of overflow hidden would be needed.

Any help is much appreciated!

[elmac2899]

Sorry, also important to note that the it is not a 90 degree angle, but a bit larger at the corner

[Paulie_D]

I’d use an SVG…probably simpler all round.

[elmac2899]

@Paulie_D – Sounds good. I’m not too familiar with the usage of SVGs – any tutorial you would recommend for learning to construct these SVGs?

Thanks!

[Pogany]

Hi,
I’ve made this pen for you where I’m using a skewed div, but SVG is a nice solution too:
https://codepen.io/giaco/pen/ZjZRwW

[gvinson]

So, what part are you struggling with? The skew? The gradient? Rounded corners? Little cloud-looking cut out?

[Author]

Posts