- This topic is empty.
-
AuthorPosts
-
February 2, 2017 at 4:42 am #250858
bramwolf
ParticipantHey 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.pngThanx in advance!
Grtz, BramFebruary 3, 2017 at 3:02 pm #250944mcbrwr
ParticipantHi,
Is blend mode really needed?
Wouldn’t an rgba(255,0,0,.6) overlay work fine?
Like this: http://codepen.io/mcbrwr/pen/wgjRoZBut then again, blend mode is possible too:
http://codepen.io/mcbrwr/pen/WRJLBw;-) Matthijs
February 3, 2017 at 3:03 pm #250945carpenumidium
ParticipantDid I get this right? Very rough demo: http://codepen.io/carpenumidium/pen/KaRbrM
February 3, 2017 at 3:22 pm #250948robinsonclint
ParticipantHere is another approach. I also didn’t use blend modes. http://codepen.io/clintrobinson/pen/egrbqG
February 3, 2017 at 3:37 pm #250949mcbrwr
ParticipantMaybe 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
February 3, 2017 at 4:55 pm #250950Historical Forums User
ParticipantDefinitely 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,
BumpasFebruary 3, 2017 at 5:20 pm #250951Historical Forums User
ParticipantYeah definitely a fun tricky one. I thought I’d throw mine in the ring.
http://codepen.io/bumpas/pen/xgjmWp/
Cheers,
BumpasFebruary 6, 2017 at 4:18 am #250997bramwolf
ParticipantWow 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 -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.