CSS 带有 SVG 标志的三角形剪辑路径未显示在 Tablet/IPad 中

Question

你好，我的 html/css.

中有一个三角形角元素

剪辑路径在桌面上运行良好，但在 Tablet/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.. 就一个 class。呸！

.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

看https://www.wonderflags.pro/css-shapes应该是（倒三角形）

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

CSS 带有 SVG 标志的三角形剪辑路径未显示在 Tablet/IPad 中

CSS Triangle clip-path with SVG Flag not displaying in Tablet/IPad

html

css

svg

tablet

ipad