CSS Slanted Edges with outer border around edges - html

Question

Is this possible at all using just CSS? I need to create two slant edges with an outer border but seeming that I created the slant edges with a border I am completely lost.
This is how far I got.
JSFIDDLE does not seem to want to load today??? but will post it on there as soon as possible :).
Here's the CSS:
.wrap {width:29%;}
.slider-header:before {
content:'';
border-top:20px solid white;
border-right: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:20px;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 20px;
}
.slider-header {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
background:#000000;
position:relative;
font-size:1em;
padding-left:1.5em;
width:200px;
float:right;
}
.slider-header2:before {
content:'';
border-bottom:20px solid white;
border-left: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:20px;
position: absolute;
top: 0;
right: 0;
height:100%;
width: 20px;
}
.slider-header2 {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
background:#000000;
position:relative;
font-size:1em;
padding-left:1.5em;
width:200px;
float:left;
}
and the HTML:
<div class="wrap">
<div class="slider-header">
hey2
</div>
<div class="slider-header2">
hey
</div>
<div>
Hey everyone answers has been great especially Aequanox but i need this to work on IE8+ and if its IE7+ ill probably name my first born after you..

Answer 1

Here is achieved without adding any markup.
<div class="wrap">
<div class="slider-header">
hey1
</div>
<div class="slider-header2">
hey2
</div>
<div>
CSS is not optimized at all, just to achieve the deired effect.
.wrap{width:500px; padding:5px; display:block; overflow:hidden}
.wrap div{background:#333; color:#fff; width:235px; }
.wrap:after{
content:"";
display:block;
border-top:1px solid #333;
margin-top:-5px;
margin-left:265px;
width:235px;
}
.wrap:before{
content:"";
display:block;
border-bottom:1px solid #333;
position:absolute;
top:37px;
width:235px;
}
.slider-header{position:relative; float:left;}
.slider-header2{position:relative; float:right;}
.slider-header:before{
content:"";
display:block;
height:1px;
width:70px;
background:#333;
position:absolute;
left:225px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.slider-header:after{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
right:-20px;
border-right: 20px solid transparent;
border-top: 20px solid #333;
}
.slider-header2:before{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:-20px;
border-left: 20px solid transparent;
border-bottom: 20px solid #333;
}
And here's the fiddle : http://jsfiddle.net/dG7mD/

Answer 2

It is possible to draw the shapes:
http://techcruser.blogspot.com/2011/08/draw-various-shapes-using-css.html
I was able to get the shapes without writing in them:
html:
<table>
<tr>
<td class="triangle-topleft">
button1
</td>
<td class="triangle-bottomright">
button2
</td>
</tr>
</table>
css:
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
*/}
.triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
but honestly, I would use jquery to do my buttons or menus. It makes it easier in the long run.

Answer 3

What about using some simple hr's?
HTML:
<div id="elem"> <span>Text 1</span>
<span>Text 2</span>
<hr id="hr1" class="lines" />
<hr id="hr2" class="lines" />
<hr id="hr3" class="lines" />
</div>
CSS:
#elem {
height: 50px;
width: 320px;
background: black;
margin: 50px;
position: relative;
}
#elem > span {
box-sizing: border-box;
height: 100%;
width: 50%;
color: white;
display: block;
float: left;
padding: 0.2em 1.5em;
}
hr.lines {
height: 1px;
background-color: black;
color: black;
border: 3px solid white;
border-left: 0 none;
border-right: 0 none;
position: absolute;
margin: 0;
}
hr#hr1 {
-webkit-transform: rotate(-55deg);
-moz-transform: rotate(-55deg);
-o-transform: rotate(-55deg);
width: 70px;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -3px;
}
hr#hr2 {
width: -webkit-calc(50% - 25px);
bottom: -7px;
left: 0;
}
hr#hr3 {
width: -webkit-calc(50% - 15px);
top: -7px;
right: 0;
}
Fiddle!