html - 如何使 flex 和 svg 在 safari 和 IE11 中工作

Question

我有一个简单的丝带横幅，我正在尝试制作它，我可以在 Chrome 中使用它，但不能在 Safari 或 Internet Explorer 11 中使用。

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:

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

当我在 IE11 中尝试这样做时，文本和 SVG 之间出现了很大的差距。

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

奖励:

如果可能的话，我也喜欢将右侧的 Angular (SVG) 圆化。

Answer 1

可选地，您可以在没有 SVG 的情况下执行此操作，方法是使用伪元素和 transform: skew().. .. 它在右侧也有圆 Angular ......并且可以工作在 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>