title: How to create a div with a diagonal (or angled) top line
body: <p>I'm a newbie on CSS3 and all I know is self-learned, reading you guys or any other tutorials so after hours of researching and trial-error, I could really use your help :(.</p>
  
  <p>I'm trying to rotate JUST the top line of a div. This is what I did so far:</p>
  
  <p><a href="http://blanc-design.com/sigma2/">http://blanc-design.com/sigma2/</a></p>
  
  <p>On the footer, I have rotate two divs to create that effect. But what I want to do is to have a straight bottom line on the green div. This is an example of how I would like it to be: </p>
  
  <p><a href="http://blanc-design.com/sigma2/ex.jpg">http://blanc-design.com/sigma2/ex.jpg</a></p>
  
  <p>I don't know if I'm explaining myself right. This is the CSS code I've used to rotate the divs:</p>
  
  <pre><code> #footer-top {
  color: #fff;
  padding: 35px 0 15px;
  transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);-webkit-transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);-moz-transform: rotate(2deg) scale(1) skew(3deg) translate(0px);-o-transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);-ms-transform:  rotate(2deg) scale(1) skew(3deg) translate(0px);
  }
  
  #footer-space {
  padding: 0 0 6px;
  }
  
  #footer-top2 {
  color: #fff;
  background-color: rgba(20,  122,  188,  0.5);
  background: rgba(20,  122,  188,  0.5);
  color: rgba(20,  122,  188,  0.5);
  padding: 6px 0 12px;
  height: 2px;
  transform:  rotate(358deg) scale(1) skew(0deg) translate(0px);-webkit-transform:  rotate(358deg) scale(1) skew(0deg) translate(0px);-moz-transform: rotate(358deg) scale(1) skew(0deg) translate(0px);-o-transform:  rotate(358deg) scale(1) skew(0deg) translate(0px);-ms-transform:  rotate(358deg) scale(1) skew(0deg) translate(0px);
  }
  
  #footer-top3 {
  color: #fff;
  background-color: rgba(128,  185,  46,  0.7);
  background: rgba(128,  185,  46,  0.7);
  color: rgba(128,  185,  46,  0.7);
  transform:  rotate(358deg) scale(1) skew(-2deg) translate(0px);
  -webkit-transform:  rotate(358deg) scale(1) skew(-2deg) translate(0px);
  -moz-transform: rotate(358deg) scale(1) skew(-2deg) translate(0px);
  -o-transform:  rotate(358deg) scale(1) skew(-2deg) translate(0px);
  -ms-transform:  rotate(358deg) scale(1) skew(-2deg) translate(0px);
  }
  </code></pre>
  
  <p>And this is the HTML:</p>
  
  <pre><code>&lt;div id="footer-top2"&gt;&lt;/div&gt;
      &lt;div id="footer-space"&gt;&lt;/div&gt;
      &lt;div id="footer-top3"&gt;
      &lt;div id="footer-top"&gt;
          &lt;div class="container clearfix"&gt;
              &lt;div class="one-fourth"&gt;
                  &lt;div class="widget twitter-widget"&gt;
                      &lt;h3&gt;Últimos Tweets&lt;/h3&gt;
                      &lt;div class="tweet"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="one-fourth"&gt;
                  &lt;div class="widget twitter-widget"&gt;
                      &lt;h3&gt; Facebook Feed&lt;/h3&gt;
                      &lt;div class="tweet"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="one-fourth"&gt;
                  &lt;div class="widget twitter-widget"&gt;
                      &lt;h3&gt;Fotos en Instagram&lt;/h3&gt;
                      &lt;div class="tweet"&gt;&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
  
              &lt;div class="one-fourth column-last"&gt;
                  &lt;div class="widget contact-info"&gt;
                      &lt;h3&gt;Contacto&lt;/h3&gt;
                      &lt;div&gt;address here
                          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>If any of you could help me I will be very grateful!!</p>
  
  <p>Thanks in advance. </p>
  
  <p>b.</p>