Div with slanted div overylay?

[toolman]

Hi there,

Ia m trying to create the following effect with a background image, text and slanted overlay, however I am struggling to do this.

This is what I am trying to create:

This is a fiddle I have.

I am trying to set the #ececec background to transparent so I can place it on top of an image to have an overlay effect on an image, but not sure how to do this.

Can anyone help me with this? If I set the border-right: 100px solid #ececec; to transparent, it takes the blue colour.

Edit fiddle - JSFiddle - Code Playground

[WebSteve]

Some of your CSS is off. I don’t know if these will resolve the problem, but they should be fixed:

.slanted:after,
.slanted:before {
: should be :: (single colon should be double colons)
.slanted::after,
.slanted::before {

.slanted-right.slant-to-right:after
: should be :: (single colon should be double colons)
.slanted-right.slant-to-right::after

[PaulOB]

I would use clip-path as its more controllable.

Here’s a bare bones example.

[toolman]

Awesome, many thanks I will have a play