IE10이 rgba 삼각형 또는 : before/after triangles로 작동하지 않습니다.

Question

IE10에서만 발생하는 문제를 발견했습니다. IE9에서 작동하며, 어떤 일이 일어나고 있는지 정확히 파악할 수 없습니다. 나는 내 사이트에 많은 rgba 요소를 사용하고 IE10은 모두 정상적으로 실행하는 것 같다. 이 같은 일을 처리하는 데 유일한 문제 :

.links:before { 
    content: ""; 
    border-left: 105px solid transparent; 
    border-right: 105px solid transparent; 
    border-bottom: 25px solid rgba(255, 255, 255, 0.77); 
    bottom: 0; 
    left: 0; 
    position: absolute; 
} 

는 그때 생각은 어쩌면 그냥 때문에 IE10이 좋아하지 않는 의사 요소이다. 그래서 시도 : 반투명 삼각형 슬프게도, 그것은 잘 작동하지 않았다, 모든 것을 미워 IE를 해결하기 만하기로

.linkTri { 
    border-left: 105px solid transparent; 
    border-right: 105px solid transparent; 
    border-bottom: 25px solid rgba(255, 255, 255, 0.77); 
    bottom: 0; 
    left: 0; 
    position: absolute; 
} 

가 그때 그냥 거기에 그것을 추가했다. 삼각형을 흰색 삼각형으로 표시합니다.

아이디어가 있으십니까?

는

는 jsfiddle (바이올린에서 IE의 문제를 표시하지 않는 것)

Live site 내가 또한 단지 opacity: 0.77;하지만 같은 문제를 시도했다 (이 표시됩니다 문제)

는 :/

Answer 1

이 보인다 그게 반투명 삼각형이 페이지의 배경으로 보이지 않는다는 것입니다. 이 효과를 얻으려면 아마도 :before 및 :after 의사 요소를 사용하여 두 개의 직각 삼각형을 만들어보십시오. 테두리 색은 목록의 배경색과 일치합니다. 예를 들어 : DEMO :

오른쪽에 점선 경계를 표시하고 남아 있지 멋진 경우

.links:before, 
.links:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    border: solid #c7c7c7; 
} 

.links:before { 
    left: 0; 
    border-width: 25px 105px 0 0; 
    border-right-color: transparent; 
} 

.links:after { 
    right: 0; 
    border-width: 25px 0 0 105px; 
    border-left-color: transparent; 
} 

, 당신은 이런 식으로 뭔가를 시도 할 수 있습니다. 해당 스타일이 필요한 경우 목록을 다른 요소 안에 포함하고 그에 따라 스타일을 지정할 수 있습니다.

Chrome, Firefox, IE9, IE10에서 작동합니다. 저쪽에 시험하지 않았다.