NurlPlaureFek
New Member
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:\[code\].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;}\[/code\]and the HTML:\[code\]<div class="wrap"> <div class="slider-header"> hey2 </div> <div class="slider-header2"> hey </div><div>\[/code\]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..
.Here's the CSS:\[code\].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;}\[/code\]and the HTML:\[code\]<div class="wrap"> <div class="slider-header"> hey2 </div> <div class="slider-header2"> hey </div><div>\[/code\]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..