Tricky overlapping trapezoid Shape

[bramwolf]

Hey Guys,

I’m very experienced in HTML and CSS but still came across a pretty difficult design element which I want to create. The idea is that I want a half-trapezoid shape to overlap a photo with a blending mode. I use a container on the site which is 1150px wide, the left
over space to the right had to be filled with a similar overlay. The screenshot will describe this more clearly.

I’ve tried using trapezoids but when placing text with a element in the trapezoid the element also had the blend mode applied which makes the text unreadable, I can fix this but absolute positioning the element but that creates new placement issues.

I floated the trapezoid shape to the right of my container but this doesn’t really work as I have to place the second overlay ( red square right of the container with the trapezoid ) absolutely to get it outside to container.

How would you guys go about creating this? My goal is to have the trapezoid on the right side of the middle container and have the margin to the right of it filled with the same overlay color. As the screen becomes smaller the margin area to the right should diminish until the container fills the entire with of the page. Now the trapezoid should still float to the right of the container with the text element inside still in tact.

You’ll find the screenshot here:
http://bramwolf.nl/tmp/trapezoid-design.png

Thanx in advance!
Grtz, Bram

[mcbrwr]

Hi,

Is blend mode really needed?
Wouldn’t an rgba(255,0,0,.6) overlay work fine?
Like this: http://codepen.io/mcbrwr/pen/wgjRoZ

But then again, blend mode is possible too:
http://codepen.io/mcbrwr/pen/WRJLBw

;-) Matthijs

[carpenumidium]

Did I get this right? Very rough demo: http://codepen.io/carpenumidium/pen/KaRbrM

[robinsonclint]

Here is another approach. I also didn’t use blend modes. http://codepen.io/clintrobinson/pen/egrbqG

[mcbrwr]

Maybe you’ve already got this covered, but there’s also the same skew+overflow hidden trick to make the one-side-skewed headings in a scalable manner:

http://codepen.io/mcbrwr/pen/ygjZNX

:-) Matthijs Brouwer

[Historical Forums User]

Definitely a tricky fun thing to mess around with. Mine is pretty much the same as above, but thought it was fun to see how everyone else did things.

http://codepen.io/bumpas/pen/xgjmWp/

Cheers,
Bumpas

[Historical Forums User]

Yeah definitely a fun tricky one. I thought I’d throw mine in the ring.

http://codepen.io/bumpas/pen/xgjmWp/

Cheers,
Bumpas

[bramwolf]

Wow guys!

Great work :D By checking out all of your versions I learned a lot of new ways to accomplish this
in CSS, All great answers, thanks for your input! :)

Friendly greets,
Bram Wolf

[Author]

Posts