CSS 또는 svg 웹킷에서만 화살표 div 만들기

Question

슬라이드를 약간의 화살표 느낌으로 미리 볼 수있는 인터페이스 (슬라이드 쇼 관리)를 만들어야합니다. 어떻게해야합니까? 나는 CSS의 한계를 넘은 것처럼 느낀다. 나는 브라우저 호환성에 대해 정말로 신경 쓰지 않는다. 웹킷 전용 플랫폼이다.

일단 내가 그 모양을 얻었다면, 나머지는 쉽게 될 것이라고 생각한다. css (border, shadow , 중복, ...)이 미리보기입니다

:

어떤 생각이 어떻게이를 달성하기? 상자는 항상 같은 크기/비율이 아닐 수 있습니다 .. 실제로는 무엇이든 초상화와 풍경이 될 수 있습니다. 일부 벡터 기반 마스크 레이어를 사용하는 것이 가능합니까?

Answer 1

좋아, 나는 그것을 내가 원했던 거의 바른 방식으로 렌더링 할 수 있었다. 좋은 방향으로 나를 가리키게 해준 Vals 덕분이다. 결과 (만 크롬 및 모바일 사파리에서 작동)와

바이올린은 : fiddle

나는 .. 클리핑 렌더링 그림자 후 처리 될 때, 그림자를 적용 할 컨테이너 사업부를 사용했다 그러나 컨테이너 사업부 직사각형이므로 간단한 그림자가 작동하지 않습니다. 이 경우에는 CSS 필터가 작동합니다. 흰색 테두리와 동일하며 다른 div에서 그림자 필터를 사용합니다.

.arrowClip 
{ 
    -webkit-clip-path: polygon(0 0, 100% 0 , 100% 80%, 50% 100%, 0 80%); 
} 

.arrowContainer 
{ 
    -webkit-filter: drop-shadow(0px 0px 10px rgba(0,0,0,0.9)) ; 
} 
.arrowStroke 
{ 
    -webkit-filter: drop-shadow(0px 0px 2px rgba(255,255,255,1)) ; 
}