- This topic is empty.
February 2, 2017 at 4:42 am #250858bramwolfParticipant
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, BramFebruary 3, 2017 at 3:02 pm #250944mcbrwrParticipant
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:
;-) MatthijsFebruary 3, 2017 at 3:03 pm #250945carpenumidiumParticipant
Did I get this right? Very rough demo: http://codepen.io/carpenumidium/pen/KaRbrMFebruary 3, 2017 at 3:22 pm #250948robinsonclintParticipant
Here is another approach. I also didn’t use blend modes. http://codepen.io/clintrobinson/pen/egrbqGFebruary 3, 2017 at 3:37 pm #250949mcbrwrParticipant
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 BrouwerFebruary 3, 2017 at 4:55 pm #250950Historical Forums UserParticipant
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.
BumpasFebruary 3, 2017 at 5:20 pm #250951Historical Forums UserParticipant
Yeah definitely a fun tricky one. I thought I’d throw mine in the ring.
BumpasFebruary 6, 2017 at 4:18 am #250997bramwolfParticipant
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! :)
- The forum ‘CSS’ is closed to new topics and replies.