html - CSS 倾斜边缘，边缘周围有外边框

Question

仅使用 CSS 有可能吗？我需要创建两个带有外边框的倾斜边缘，但似乎我创建了带有边框的倾斜边缘我完全迷路了。

这就是我得到的结果。

JSFIDDLE 今天好像不想加载？？？但会尽快将其发布到那里 :)。

这是 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;

}

和 HTML:

<div class="wrap">
    <div class="slider-header">
    hey2
    </div>

    <div class="slider-header2">
    hey
    </div>
<div>

嘿，每个人的回答都很好，尤其是 Aequanox，但我需要这个才能在 IE8+ 上工作，如果它的 IE7+ 生病了，我的第一个 child 可能会以你的名字命名..

Answer 1

这里是在不添加任何标记的情况下实现的。

<div class="wrap">
   <div class="slider-header">
   hey1
   </div>

   <div class="slider-header2">
   hey2
   </div>
<div>

CSS 根本没有优化，只是为了达到预期的效果。

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

这是 fiddle :http://jsfiddle.net/dG7mD/