cssでバックグラウンド画像を使用して正三角形の三角形を作成していますか？

Question

IE11でも動作します。 私が試してみた：境界線を使用して

• 通常の三角形クレート技術 - は、無背景画像失敗しました。

• クリップパス - をスキューと適切パーセントベースの長さを有するの戦争を有する変換でないIEサポート

• 三角形を失敗しました。それを理解しようとしているの〜3時間後 - 私の最後の必死の努力はおそらくそれに三角形のカットでSVGマスクを作成して所望の画像の上に置くことになる

を失敗しました。しかし、それはハッキリと感じます。それを得るために

Answer 1

ワン働か：

.base { 
 
    width: 70%;; 
 
    height: 200px; 
 
    margin: 10px; 
 
} 
 

 
.test { 
 
    background-image: url(http://lorempixel.com/600/600); 
 
    width: 100%; 
 
    height: 0px; 
 
    padding-top: 86.6%; 
 
    position: relative; 
 
} 
 

 
.test:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 50%; 
 
    bottom: 0px; 
 
    background-image: linear-gradient(-60deg, transparent 50%, white 50%); 
 
} 
 

 
.test:after { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 50%; 
 
    bottom: 0px; 
 
    right: 0px; 
 
    background-image: linear-gradient(60deg, transparent 50%, white 50%); 
 
}

<div class="base"> 
 
    <div class="test"></div> 
 
    </div>