0

I'm building a website and my home page(index) needs to be splitted on two parts. Left(white) and Right(blue). So both sides needs to be links and to have hover effect. For example, when I hover on right side it should be a little bit extended.

So my question is: How can I split page on two parts with diagonal line and made them links?

Wireframe Image

jbutler483
  • 24,074
  • 9
  • 92
  • 145
Lazar Bulatovic
  • 23
  • 3
  • Image map or border tricks – adeneo May 01 '16 at 15:49
  • I need it to be responsive. And it needs to have hover effect – Lazar Bulatovic May 01 '16 at 15:51
  • http://stackoverflow.com/questions/18012420/draw-diagonal-lines-in-div-background-with-css – adeneo May 01 '16 at 15:53
  • Should put all of the information needed to answer your question into the question ( that it needs to be responsive ) – konkked May 01 '16 at 16:05
  • If you're okay with using the deprecated [`clip`](https://developer.mozilla.org/en-US/docs/Web/CSS/clip) property you can likely achieve what you're after. Have a look at this jsfiddle demo I found: http://jsfiddle.net/damo_s/vy09tsp5/ – damo-s May 01 '16 at 16:42
  • Thank you! place that as an answer – Lazar Bulatovic May 01 '16 at 16:49
  • 2
    You may find this helpful: [Shape with a slanted side (responsive)](http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive) – jbutler483 May 01 '16 at 21:02
  • Thank you! Some write answer to aprove it – Lazar Bulatovic May 01 '16 at 21:24
  • a single gradient can be used http://codepen.io/gc-nomade/pen/aNQppz or a pseudo a bit oversized http://codepen.io/gc-nomade/pen/PNxPda but it is only visual, containers containers keeps being rectangle boxes and contents can overlap from a side to the other. You'll need some extra work and tricks to keep each side's content in its visual area. – G-Cyrillus May 01 '16 at 21:49

0 Answers0