html - 带有 SVG 标志的 CSS 三 Angular 形剪辑路径未在平板电脑/iPad 中显示

Question

您好，我的 html/css 中有一个三 Angular 形 Angular 元素。

剪辑路径在桌面上运行良好，但在平板电脑/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 中..只是在一个类上。呸!

.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;
}