1

CSSだけでこれは可能ですか？外側の境界線で 2 つの傾斜エッジを作成する必要がありますが、境界線で傾斜エッジを作成したように見えますが、完全に失われています。

これが私が得た距離です。

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+ で動作するにはこれが必要です。

4

3 に答える 3

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 に答える
0

形状を描画することが可能です: http://techcruuser.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 に答える
-1

いくつかの単純な を使用する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;
}

フィドル！

于 2013-03-23T13:33:48.963 に答える