1

仅使用 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+ 可能会以你的名字命名我的第一个出生的人。

4

3 回答 3

0

可以绘制形状： 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 来做我的按钮或菜单。从长远来看，它更容易。

于 2013-03-23T12:58:35.907 回答
0

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

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

于 2013-03-23T13:44:22.517 回答
-1

使用一些简单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;
}

小提琴！

于 2013-03-23T13:33:48.963 回答