Css Tricks, Diagonal Line

Question

How could I re-create this using purely css/css3? Can your option please include a way to set border options, i.e. drop shadow styling.

EDIT

This is what I had:

.border_div{
    width: 200px;
    height: 5px;
    -webkit-transform: rotate(315deg);
    -moz-transform: rotate(315deg);
    transform: rotate(315deg);
    position: absolute;
    color: black;
    background-color: black;
    margin-top:15.5%; 
    margin-left:22%;
}

Answer 1

Try This: DEMO (EDITED)

body { margin: 50px; }
div {
    width: 400px;
    height: 60px;
    position: relative;
    text-align: center;
}
div:before, div:after {
    content: " ";
    position: absolute;
    border-radius: 5px;
    border: 5px solid #000;
    left: 0;
    bottom: 0;
}

div:before { width: 400px; }
div:after {
    width: 100px;
    transform: rotate(-45deg);
    transform-origin: 5px 50%;
}

<div>
     <h1>My Text</h1>
</div>

Vendor prefixes omitted due to brevity.