Slanted sidebar layout

Question

Is it possible to have this slanted right-hand sidebar layout with CSS? The left side would be the main content where I assume the slanted sidebar layout could overlap the extra.

I've asked this question before but don't think a fixed pixel height border will do the trick to achieve the layout. Is there any other way? Something more flexible?

slanted layout

Please don't repost questions. http://stackoverflow.com/questions/24749872/css-slanted-sidebar-layout — BoltClock, Jul 24 '14 at 11:24

score 1 · Answer 1 · answered Jul 24 '14 at 07:08

1

You can use diagonal linear gradient backgrounds with color stops to get that effect, e.g. linear-gradient(to bottom right, #1e5799, #1e5799 50%, #207cca 50%, #207cca);. Here's an example.

answered Jul 24 '14 at 07:08

Ryan Mitchell

754
5
8

hmm but the angle isn't right? It should be sharper vertical. – blkedy Jul 24 '14 at 07:24
@user1420650 That's because I set the div height fairly short. It stretches from corner to corner. You should be able to fix that fairly easily. – Ryan Mitchell Jul 24 '14 at 07:25
Here's an [updated example](http://jsfiddle.net/posgarou/GBzRp/) of what I mean. – Ryan Mitchell Jul 24 '14 at 07:30
Interesting, thank you! This may work.. – blkedy Jul 24 '14 at 07:31
Also, I just discovered that it looks better if you set the stops to 49%/51% rather than 50/50. – Ryan Mitchell Jul 24 '14 at 07:34

Slanted sidebar layout

1 Answers1