Question

我有一个简单的功能区横幅，我试图制作，我让它在Chrome中工作，但不是Safari或IE11。

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（而不是基于高度缩放）。

奖金：

如果可能的话，我也喜欢围绕右侧的角落（SVG）。

Answer 1

或者你可以在没有SVG的情况下通过使用伪元素和transform: skew()来实现这一点..并且它在右侧也有圆角...并且在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>

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

1 个答案: