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>

Answer 2

由于您提供的第一版和第二版差异很大，因此我不确定您要实现的目标。我主要是去第一个。

主要技巧是使用viewBox属性的方式（及其伴随的preserveAspectRatio）。将viewBox视为适合您用width和height定义的区域的矩形。 preserveAspectRatio描述了拟合规则：为适合元素内部的矩形选择最大可能的大小，然后将其向左移动并垂直向中间移动。

<svg>内的所有内容现在都将保持固定的位置并与该矩形成比例。如果提高元素的高度，则文本的大小会增加；如果您减小其宽度，最终它将收缩，但始终会与多边形一起收缩。

我用text-anchor: middle定位了文本，这与SVG的text-align: center等效。像以前一样使用0.4的字体大小不是一个好主意。浏览器容易处理小于1的值。

最后，如果您使用它代替<h1>标签，则应将其包围以保持可访问性，或设置适当的ARIA属性，如下所示：

.title {
  height: 60px;
  width: 100%;
  display: block; /* not needed if surrounded by <h1> */
}

.title polygon {
  fill: blue;
}

.title text {
    font-family: Arial;
    font-size: 24px;
    fill: #FFF;
    text-anchor: middle;
}

<svg class="title" viewBox="0 0 250 60" preserveAspectRatio="xMinYMid meet"
     aria-role="heading" aria-level="1">
    <polygon points="2.5,0 250,9 240,54 0 45" />
    <text x="125" y="36">WELCOME TO</text>
</svg>

用SVG形状代替剪切路径形状

2 个答案: