almostamachine almostamachine - 6 months ago 27
Javascript Question

Irregular DIV shape, cross browser platform support

I'm trying to make a irregular shaped DIV, but the only method that I found out to accomplish this is by using the polygon() function. Unfortunately, IE and FF don't support it. I don't need all versions to be supported, but at least the latest, of IE, FF and Chrome.

What I'm trying to accomplish is basically this - with a black border between the white and the red:

Example

The white part would be the navigation menu (home, contact, about, etc) and the red portion would be the content, however, I need ALL the red part to be clickable (meaning: I can put a link anywhere and the user can click with ease...)

The end result should look something like this:

Mockup

Also, the white div needs to maintain the angle independent of the size of the viewport, because the site will be responsive.

How could I achieve this?

Answer

Let's make the sloped sidebar with a transform:

  • The sidebar is given position: fixed and will stay in one place relative to the viewport

  • The sidebar is given transform: rotate(20deg) to rotate it and create a sloped shape

  • transform-origin: 100% 0% helps position the sidebars shape where we want it (read more on transform-origin here)

  • The nav inside the sidebar is given transform: rotate(-20deg) to cancel out the rotation for the text

  • Max width / height is used to keep the size of the sidebar flexible but not too large or small

Example

html,
body {
  margin: 0;
  background: #EEE;
}
.sidebar {
  height: 200%;
  width: 100%;
  max-width: 400px;
  min-width: 250px;
  display: block;
  background: #FFF;
  transform: rotate(20deg);
  transform-origin: 100% 0%;
  position: fixed;
  left: 0;
  top: 0;
  border-right: solid 2px #000;  
}
/*Demo purposes*/

.sidebar > nav {
  position: absolute;
  top: 100px;
  left: 30%;
  width: 300px;
  transform: rotate(-20deg);
}
.sidebar > nav > a {
  display: block;
}
.content {
  background: #CCC;
  text-align: right;
}
<div class="sidebar">
  <nav>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
    <a href="#">Link</a>
  </nav>
</div>

<div class="content">
  I am covered by the sidebar!
</div>

Comments