title: How can I create a CSS border on a diagonal element
body: <p>Here is an example. <a href="http://jsfiddle.net/52c7t/" rel="nofollow">http://jsfiddle.net/52c7t/</a></p>
  
  <p><strong>Simply:</strong> I'm trying to get the div on the right side, to have a border like the div on the left. (I'd want the border to be on the left side of the right div)</p>
  
  <p>I tried a million different combinations and haven't been able to do it. I was trying to avoid making an image and do this with css. </p>
  
  <p>Thanks for your help!</p>
  
  <p><strong>UPDATE:</strong> </p>
  
  <p>Image of what I mean. Sorry about my graphic design skills :P </p>
  
  <p><a href="http://i.imgur.com/pGSnL.png" rel="nofollow">http://i.imgur.com/pGSnL.png</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id = "top_bar"&gt;
          &lt;div  id="top_left_button" &gt;border&lt;/div&gt;
          &lt;div  class = "trapezoid"&gt; none &lt;/div&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.trapezoid{
      vertical-align: middle;
      position:absolute;
      border-bottom: 60px solid blue;
      border-left: 45px solid transparent;
      border-top-left-radius:30px;
      *border-top-right-radius:15px;
      *border-bottom-right-radius:3px;
      height: 0;
      width: 50px;
      display: inline-block;
      right:1px;
  }
  
  
  
  #top_bar{
      background-color: #000;
      border-bottom: 1px solid #666;
      color: #222;
      position:fixed;
      left:0px;
      top: 0px;
      width:100%;
      overflow:hidden;
      height: 50%;
      font-weight: normal;
      white-space: nowrap;
      color: white;
      z-index:20; 
      line-height: 45px;
      min-width:320px;
      max-width: 320px;
      max-height:48px;
      border-radius: 5px;
      text-shadow: rgba(0,0,0,0.6) 0px -1px 0px; 
  }
  
  #top_bar:after {
      content: '';
      width: 10%;
      display: inline-block;
      font-size: 0;
      line-height: 0
  }
  
  #top_title, #top_left_button, #notifications, #top_right_button {
      color: white;
      height: 100%;
      overflow:hidden;
      display: inline-block;
      text-align: center;
      vertical-align: middle;
  }
  #top_left_button,#top_right_button{
      width: 20%;
      background: rgba( 100, 255, 255, .1 );
  }
  
  
  #top_left_button{
      border-right: 2px solid #666;
  
  }​
  </code></pre>
  
  <p><strong>EDIT:</strong> UPDATED LINK</p>