빈 화살표 이미지 앞에

이미지 앞에 빈 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; 
    } 
}

IE8 확실

http://jsfiddle.net/dhs2eba2/

출처

2014-09-09 Bitpunk

은 –

그는이 아닌 의미 화살표 요소를 필요로하며, 의존 의미 @Alek "아주 더러운 느낌"이해할 수 없다 '이전'과 '이후'모두에서 그가 더 쉽게 할 수 있어야한다고 느낀 것에 대한 많은 마크 업입니다 – Joe

관련 질문 : http://stackoverflow.com/questions/23758922/transparent-css-arrow-triangle-over-an-image/23759602#23759602 –

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

출처

2014-09-09 08:28:38

아니, 내 VM에 사본을 가지고하지 않은,하지만 대신 의사 요소를 이런 식으로 접근 할 수

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

출처

2014-09-09 08:27:24 MLeFevre

빈 화살표 이미지 앞에

답변

관련 문제