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 +生病可能是我出生在你身后的第一个...

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

这是小提琴：http://jsfiddle.net/dG7mD/

Answer 2

可以绘制形状： http://techcruser.blogspot.com/2011/08/draw-various-shapes-using-css.html

我能够在不写入形状的情况下获得形状：

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

但老实说，我会用jquery来做我的按钮或菜单。从长远来看，它更容易实现。

Answer 3

使用一些简单的hr怎么样？

<强> 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!

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

3 个答案: