html - 用 SVG 形状替换剪辑路径形状

Question

我现在有一个多边形，里面有如下所示的文本

.title {
  clip-path: polygon(1% 0, 100% 15%, 96% 90%, 0 75%);
  background-color: blue;
  
  color: #FFF;
  font-size: 1.7em;
  line-height: 50px;
  
  height: 60px;
  width: 250px;
}

<h1 class="title">&nbsp;&nbsp;WELCOME TO</h1>

我正在寻找一个对浏览器更友好的版本，所以我一直在研究使用 SVG 图像。我正在努力很好地编写代码，正如您在下面看到的，我有 SVG 形状，经过一些测试后，我很快意识到它不能很好地适应浏览器宽度。如果我能一直保持相同的大小，我会很高兴。

然后在研究之后对于文本，我了解了标签内的标签，但即便如此我也在努力格式化文本。

<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 7 9" version="1">
      <polygon points=".1 0,5 .2,4.4 1.8,0 1.6" style="fill: #253234;" />
      <text x="1" y="1" fill="white" style="font-family:arial; font-size:.4">WELCOME TO</text>
    </svg>

有谁知道在主流浏览器和设备上运行的更好的方法吗？

Answer 1

如果我是你，我会尝试仅使用 css 对容器使用旋转来实现相同的效果，以相同的量反转文本旋转，然后使用具有绝对定位的伪元素 (:after) 来实现非矩形形状效果。

运行示例代码片段，您可以根据自己的需要进行调整。

.container {
  transform:rotate(3deg);
  display:inline-block;
  position:relative;
  top:50px;
  padding:20px 30px 20px 20px;
  background-color:blue;
}
.container:after {
  content:'';
  display:block;
  background:white;
  width:20px;
  height:110%;
  position:absolute;
  top:0;
  right:-10px;
  transform:rotate(10deg);
}
.title {
  color:#fff;
  display:inline-block;
  font-size:18pt;
  text-transform:uppercase;
  font-family:arial;
  transform:rotate(-3deg)
}

<div class="container"><span class="title">Welcome to </span></div>