CSS3 화살표

안녕 현재 내가 CSS를 화살표를 생산하는이 CSS를 가지고 있지만 내가 다뤄왔다CSS3 화살표

.arrow { 
    width: 0px; 
    height: 0px; 
    border-style: solid inset; 
    border-width: 10px 78px 0 78px; 
    border-color: #000 transparent transparent transparent; 
    z-index: 1; 
}

어떤 아이디어가 그 위에 그림자를 얻을 수없는 것 : 후 : 전에 만에 더 성공

출처

2014-01-10 Johan Rheeder

지난 달 내 자신의 작업을 위해이 작업을 몇 시간 씩 보냈다. 나는 증명서 상자를 위해 그것을 필요로했다, 대신 나는 이것을했다 : http://jsbin.com/OjexExa/1/edit. – Christina

당신의 화살표가 고체 사각형 아래에 배치 될 것입니다 때문에, 이것은 당신에게

.demo { 
    position: absolute; 
    top: 50px; 
    left: 0px; 
    width: 200px; 
    height: 50px; 
    clip: rect(0px 400px 100px 0px);  
} 
.demo:after { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    -webkit-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    -moz-transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    transform: translate(-90px, -45px) skew(80deg) rotate(-5deg); 
    box-shadow: 30px 1px 6px blue; 
}

fiddle compared with your original arrow

을 도울 수있는 문제는 그림자가 위쪽으로 이동하지만, 일반적으로이 디자인 같으면 '할 수 없다는 것입니다 어쨌든 그 필요가 없습니다.

또한 기본 div는 매우 왜곡되어 있으므로 시행 착오를 통해 그림자를 설정해야합니다.

출처

2014-01-10 20:03:43 vals