내용이있는 삼각형이

Question

님 안녕하세요 저는 ie10에서 작동하는 크로스 브라우저 CSS 삼각형 마스크를 만들려고합니다.

heres 내가 가지고있는 것은 http://codepen.io/adamjw3/pen/RoxrNJ이지만 작동하지 않습니다. 다른 방법이 있나요?

.slider { 
     -webkit-clip-path: polygon(0 0, 68% 81%, 100% 0); 
     clip-path: polygon(0 0, 68% 81%, 100% 0); 
     overflow: hidden; 
     margin: 0 auto; 
     width: 30%; 
     } 

    img { 
     height: 100%; 
     width: 100%; 
     max-width: 100%; 
    } 

Answer 1

IE에서는 지원되지 않습니다. 당신은 다른 접근 방식을 생각할 수 있습니다. css를 통해 삼각형을 만들고 그 안에 이미지를 유지하는 것이 어떻습니까? 당신이 놀 수있는 삼각형

에 대한 또 다른 개념

.box1 { 
 
    width: 232px; 
 
    height: 180px; 
 
    border-bottom: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 
.box2 { 
 
    position: relative; 
 
    overflow: hidden; 
 
    transform: rotate(45deg) skew(10deg, 10deg); 
 
    border-left: 1px solid #000; 
 
    border-top: 1px solid #000; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 81px 0 0 16px; 
 
} 
 
.box2_bg { 
 
    position: absolute; 
 
    width: 200%; 
 
    height: 200%; 
 
    top: -50%; 
 
    left: -50%; 
 
    z-index: -1; 
 
    background: url(https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg); 
 
    background-size: 100%; 
 
    background-position: center top; 
 
    transform: skew(-10deg, -10deg) rotate(-45deg); 
 
    transition: .3s; 
 
    background-size: 50%; 
 
} 
 
.box2_bg:hover { 
 
    background-size: 90%; 
 
}

<div class="box1"> 
 
    <div class="box2"> 
 
    <div class="box2_bg"></div> 
 
    </div> 
 
</div>

: 여기

http://caniuse.com/#search=clip-path

UPDATE

더 많은 정보를 원하시면.