タブレット/ IPadにSVGフラグが表示されないCSSトライアングルクリップパス

Question

こんにちは、私はhtml/cssに三角形の要素を持っています。

クリップパスは、デスクトップ上でうまく動作しますが、タブレット/ iPad上で、これは動作しません - それだけで通常の長方形のフラグが表示され、

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.8.0/css/flag-icon.min.css" /> 

HTML

<div class="triangle"><span class="flag-icon flag-icon-us"></span></div> 

CSS

をクリップしていません

.triangle { 
    position: absolute; 
    width: 0; 
    height: 0; 
    -webkit-clip-path: polygon(0% 100%, 0 0, 100% 0%); 
    clip-path: polygon(0% 100%, 0 0, 100% 0%); 
    border-top: 70px solid #d50032; 
    border-right: 70px solid transparent; 
} 
.triangle>span { 
    position: relative; 
    top: -71px; 
    left: -5px; 
    background-size: contain; 
    background-position: 0%; 
    background-repeat: no-repeat; 
    font-size: 70px; 
} 

Answer 1

これは私の答えです。別のdiv内でクリップする必要はありませんでした。ドー！ https://www.wonderflags.pro/css-shapesをみる

.triangle>span { 
    position: absolute; 
    top: -12px; 
    left: 0; 
    background-size: contain; 
    background-position: 0%; 
    background-repeat: no-repeat; 
    -webkit-clip-path: polygon(70% 0, 0 0, 0 70%); 
    clip-path: polygon(70% 0, 0 0, 0 70%); 
    width: 100px; 
    height: 100px; 
} 

Answer 2

それべきである（逆三角形）

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