CSS 이미지 화살 겹침

겉으로보기에는 단순한 기능으로 디자이너의 디자인을 얻었지만 그것을 만들면 간단하지 않은 것으로 판명되었습니다. CSS3 화살표를 만드는 방법을 여러 가지 발견했습니다. , 정확히 내가 무엇을 필요로하지만 기본 div 겹치기 위해 채우기 색 이미지가 있어야합니다. 이미지를 볼 수있는CSS 이미지 화살 겹침

screenshot

은 다음 절을 겹칩니다. 가장 까다로운 부분은 이미지 슬라이더의 일부라는 것입니다. 그 말은 이미지가 미끄러지기 때문에 이미지의 화살표를자를 수 없다는 것을 의미합니다. 그래서 나는 어떤 종류의 오버레이가 필요합니까?

사용중인 슬라이더는 너비 100 %에서 Whoothemes' flexslider입니다.

나는 너희들이 나를 도울 수 있기를 바랍니다!

출처

2014-01-30 Anonymous

클립 경로를 사용하여 만들 수 있습니다. –

어느 부분이 문제입니까? 작은 삼각형을 만들거나 다음 div를 겹치게 만드시겠습니까? –

문제를 해결할 수 있고 내 대답이 도움이된다면 잘 아는 것이 좋을 것입니다. –

해당 이미지 상위 항목에 두 개의 요소 (앞과 뒤에 있음)를 추가해야합니다.

.arrow-down 
{ 
    position: relative; 
    text-align: center; 
} 

.arrow-down:after, 
.arrow-down:before 
{ 
    position: absolute; 
    content: ""; 
    background-color: transparent; 
    display: block; 
    height: 30px; 
} 
/* left part */ 
.arrow-down:before 
{ 
    left: 0; 
    right: 50%; 
    bottom: 0px; 
    border-bottom: 38px solid red; 
    border-left: 0 none hsla(0, 0%, 0%, 0); 
    border-right: 60px inset hsla(0, 0%, 0%, 0); 
} 

/*right part*/ 
.arrow-down:after 
{ 
    right: 0; 
    left: 50%; 
    bottom: 0px; 
    border-bottom: 38px solid red; 
    border-right: 0 none hsla(0, 0%, 0%, 0); 
    border-left: 60px inset hsla(0, 0%, 0%, 0); 
}

는 직접보기 : http://fiddle.jshell.net/usz62/ 확실히 약간의 조정이 필요합니다.

출처

2014-01-30 10:38:16

CSS 이미지 화살 겹침

답변

관련 문제