Wie kann ich eine CSS-Grenze auf einer Diagonale element

Hier ist ein Beispiel. http://jsfiddle.net/52c7t/

Einfach: ich versuche, das div-Element auf der rechten Seite, um einen Rahmen haben, wie das div-Element auf der linken Seite. (Ich will die Grenze auf der linken Seite des rechten div)

Ich habe versucht, eine million verschiedene Kombinationen und noch nicht in der Lage, es zu tun. Ich habe versucht zu verhindern, dass ein Bild und das auch mit css machen.

Vielen Dank für Ihre Hilfe!

UPDATE:

Bild von dem, was ich meine. Tut mir Leid, mein Grafik-design-Fähigkeiten 😛

http://i.imgur.com/pGSnL.png

HTML

<div id = "top_bar">
        <div  id="top_left_button" >border</div>
        <div  class = "trapezoid"> none </div>
</div>​

CSS

.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;

}​

EDIT: AKTUALISIERT LINK