Html 如何在safari和IE11中使用flex和svg

我有一个简单的彩带横幅，我正试图使它在铬，但不是Safari或InternetExplorer11工作

HTML:

当我在IE11中尝试这一点时，我发现文本和SVG之间有很大的差距

当我在Safari中尝试此操作时，SVG没有出现，因为宽度被指定为0（而不是根据高度缩放）

奖金：

---

如果可能的话，我也希望在右侧（SVG）圆角。

也可以选择不使用SVG，通过使用伪元素和

transform:skew（）

。。它的右边也有一个圆角。。。在IE11中工作，当然也在Safari中工作，不过我不喜欢苹果的，所以不能检查：）

.text{
位置：相对位置；
填充：10px 20px；
背景色：#6e3ba1；
颜色：白色；
字体大小：粗体；
字体系列：无衬线；
字号：4rem；
边框左上半径：0.2rem；
边框左下半径：0.2rem；
}
.text:：之前，.text:：之后{
内容：''；
位置：绝对位置；
排名：0；
左：100%；
宽度：30px；
身高：52%；
变换原点：左上；
背景色：继承；
边框右上角半径：0.2rem；
变换：倾斜（-18度）
}
.text：：之后{
顶部：自动；
底部：0；
边框右下半径：0.2rem；
变换原点：右下角；
变换：倾斜（18度）
}
.集装箱{
弯曲方向：行；
显示器：flex；
柔性包装：无包装；
调整内容：灵活启动；
对齐项目：拉伸
}

出售
八折

为容器添加固定高度。我已经修改了你的风格，试试这个，让我知道谢谢。---------。容器{flex direction:row；display:flex；flex wrap:no wrap；justify content:flex start；align items:stretch；height:180px；}svg{margin left:-1px；}并对所有flex属性使用供应商前缀，即-webkit flex wrap:wrap；显示：-webkit flex；

<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>

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