Search code examples
htmlcsscss-shapes

CSS Slanted Edges with outer border around edges

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

Solution

  • 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/