CODEWITHSUNDEEP
javascriptjqueryhtmlcss
almostamachine
almostamachine

Reputation: 161

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?

Upvotes: 0

Views: 782

Answers (3)

misterManSam
misterManSam

Reputation: 24692

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>

Upvotes: 3

You Old Fool
You Old Fool

Reputation: 22940

I'm not sure this is the solution you want but you could easily achieve this by simply overlaying a png with an opaque angled white area like the one attached. It's only 1.8k at 300 x 800px and I don't see why you couldn't scale it or make it responsive with a little effort.

http://zuma-design.com/shared/angle.png

Upvotes: 1

Ola Tuvesson
Ola Tuvesson

Reputation: 5210

I would probably do this with SVG, which is widely supported. You could also achieve the angled effect with CSS transformations. I'm afraid your question is not specific enough to invite a more detailed answer, but hopefully those links will help you get started.

Upvotes: 1

Related Questions