The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tricky overlapping trapezoid Shape

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
  • #250858

    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:

    Thanx in advance!
    Grtz, Bram



    Is blend mode really needed?
    Wouldn’t an rgba(255,0,0,.6) overlay work fine?
    Like this:

    But then again, blend mode is possible too:

    ;-) Matthijs


    Did I get this right? Very rough demo:


    Here is another approach. I also didn’t use blend modes.


    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:

    :-) Matthijs Brouwer


    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.



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



    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

Viewing 8 posts - 1 through 8 (of 8 total)
  • The forum ‘CSS’ is closed to new topics and replies.