Полая стрелка перед изображением

Question

Я пытаюсь создать пустую стрелку css перед изображением.

Я получил это ... но он чувствует себя очень грязным. Есть ли лучший способ сделать это? Совместимость браузера (IE8 +) будет потрясающей.

SCSS

.arrowwrap { 
    width:100%; 
    padding:0; 
    position:relative; 
    overflow:hidden; 
    margin:-$arrow_height 0 0 0; 
    &:after { 
     content:''; 
     position:absolute; 
     height:$arrow_height; 
     width:50%; 
     margin:-$arrow_height 0 0 -$arrow_width; 
     left:0; 
     z-index:99999; 
     background:$box_color; 
    } 
    &:before { 
     content:''; 
     position:absolute; 
     height:$arrow_height; 
     width:100%; 
     left:50%; 
     margin:0 0 0 $arrow_width; 
     z-index:99999; 
     background:$box_color; 
    } 
    .arrowone { 
     width: 0; 
     height: 0; 
     border-style: solid; 
     border-width: $arrow_height $arrow_width 0 $arrow_width; 
     /* border-color: transparent transparent #333 transparent; */ 
     border-color:transparent $box_color $box_color $box_color; 
     margin:auto; 
    } 
} 

http://jsfiddle.net/dhs2eba2/

Answer 1

Если вы хотите свести к минимуму и удалить Л.Л. unsemantic разметки вы можете сделать:

DEMO

Этот метод основан на псевдо элементов и, следовательно, предотвращает использование unsemantic разметки. Псевдоэлементы поддерживаются IE8 + см. canIuse. Он также нуждается в свойстве box-sizing, чтобы включить гибкую ширину (box-sizing: border-box также поддерживается IE8 + см. canIuse).

HTML:

<div class="wrap"> 
    <img src="http://placekitten.com/800/350" /> 
    <article> 
     <h1>Hellow World, meow</h1> 
    </article> 
</div> 

CSS:

body { 
    background:#fad; 
    padding:0; 
    margin:0; 
} 

$arrow_width: 20px; 
$arrow_height: 20px; 
$box_color: #d3d030; 

.wrap { 
    img { 
     width:100%; 
     height:auto; 
     vertical-align:bottom; 
    } 
    article{ 
     padding:20px; 
     background:$box_color; 
     color:#fff; 
     position:relative; 
    } 
} 
article:before, article:after{ 
    content:''; 
    position:absolute; 
    width:50%; 
    bottom:100%; 
    box-sizing:border-box; 
} 
article:before{ 
    left:0; 
    border-bottom:20px solid #D3D030; 
    border-right:20px solid transparent; 
} 
article:after{ 
    right:0; 
    border-bottom:20px solid #D3D030; 
    border-left:20px solid transparent; 
} 

Answer 2

Не уверен, что IE8, не получил копию на мой ВМ, но вы могли бы подойти к нему, как это вместо псевдо элементов

<div class="arrowborder"> 
    <div class="arrrowwrap arrowwrapleft"></div> 
    <div class="arrrowwrap arrowwrapright"></div> 
</div> 

.arrrowwrap { 
    box-sizing:border-box; 
    width:50%; 
    z-index:9999999; 
    float:left; 
} 
.arrowwrapleft { 
    border-right: $arrow_width solid transparent; 
    border-bottom: $arrow_height solid $box_color; 
} 
.arrowwrapright { 
    border-left: $arrow_width solid transparent; 
    border-bottom: $arrow_height solid $box_color; 
} 

http://jsfiddle.net/dhs2eba2/8/