title: Create a full width header with diagonal background color
body: <p>What I'm going to explain is a little complicated, so I made an image hoping it could help us.</p>
  
  <p><img src="https://i.stack.imgur.com/LfZf8.png" alt="enter image description here">
  <em>Here is the <a href="https://www.dropbox.com/s/usldqi0tl4j4fbt/Senza%20titolo-12.png" rel="nofollow noreferrer">large image</a>.</em></p>
  
  <p>In the top part of the page there is an header. It must have some characteristics:</p>
  
  <ol>
  <li>it have to be full width but...</li>
  <li><p>its content (the logo and the menu) is wrapped in a centered div, <code>960px</code> of width</p>
  
  <p>these two points are simple: I create an header with a fixed height and a <code>100%</code> width, then a div with <code>960px</code> of width and margin <code>0 auto</code> so that it's always centered.</p>
  
  <p>Now it comes the difficulties:</p></li>
  <li><p>the background color, as you can see, is transparent, in fact we see the photo under the header. And this transparency is not the same for all the header: the side in which I should locate the logo has a certain value of opacity, and the side of menu has another value. And, moreover, the two sides are separated by a diagonal line.</p></li>
  </ol>
  
  <p>It seems to be easy, but I don't find a solution to set the background in the way it appears in the image without having problems.</p>