SafariとIE11でflexとsvgを動作させる方法

Question

私は作ろうとしている単純なリボンのバナーを持っていますが、Chromeでは動作していますが、SafariやIE11では動作しません。

CodePen Example

HTML：

<div class="container"> 
    <span class="text" style="">Sale <br/>20% off</span> 
    <span> 
    <svg height="100%" 
     viewBox="0 0 4 24"> 
     <path d="M0 0 L 4 0 L 0 12 L 4 24 L 0 24 Z" fill="#6e3ba1" /> 
    </svg> 
    </span> 
</div> 

CSS：私はテキストとSVGとの間に大きなギャップを得ていた、IE11でこれを試してみました

.text { 
    padding: 10px 20px; 
    background-color: #6e3ba1; 
    color: white; 
    font-weight: bold; 
    font-family: sans-serif; 
    font-size: 4rem; 
    border-top-left-radius: 0.2rem; 
    border-bottom-left-radius: 0.2rem; 
} 

.container { 
    flex-direction: row; 
    display:flex; 
    flex-wrap: no-wrap; 
    justify-content: flex-start; 
    align-items: stretch 
} 

。

Safariでこれを試したところ、高さに基づいてスケーリングするのではなく、幅に値0が割り当てられていたため、SVGが表示されませんでした。

BONUS：

可能であれば、私はまた、右側（SVG）の角を丸めるのが大好きです。

Answer 1

オプションで、擬似要素とtransform: skew() ..を使用してSVGを使用せずにこれを行うことができます。また、右側に丸みのあるコーナーがあります。IE11やSafariでは確かに動作します私はAppleのを好きではないので、チェックすることはできません:)

.text { 
 
    position: relative; 
 
    padding: 10px 20px; 
 
    background-color: #6e3ba1; 
 
    color: white; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    font-size: 4rem; 
 
    border-top-left-radius: 0.2rem; 
 
    border-bottom-left-radius: 0.2rem; 
 
} 
 

 
.text::before, .text::after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 100%; 
 
    width: 30px; 
 
    height: 52%; 
 
    transform-origin: left top; 
 
    background-color: inherit; 
 
    border-top-right-radius: 0.2rem; 
 
    transform: skew(-18deg) 
 
} 
 
.text::after { 
 
    top: auto; 
 
    bottom: 0; 
 
    border-bottom-right-radius: 0.2rem; 
 
    transform-origin: right bottom; 
 
    transform: skew(18deg) 
 
} 
 

 
.container { 
 
    flex-direction: row; 
 
    display:flex; 
 
    flex-wrap: no-wrap; 
 
    justify-content: flex-start; 
 
    align-items: stretch 
 
}

<div class="container"> 
 
    <span class="text" style="">Sale! <br/>20% Off</span> 
 
</div>