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 + плохо, вероятно, имя мое первый родился после того, как вам ..

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!