html - 如何在不影响其他点的情况下缩放特定点？

Question

我有一个 SVG，它是用一个多边形创建的，用于锚定边框。我遇到的一个问题是我希望按钮支持可变内容 - 允许按钮根据需要水平调整大小以适应，同时限制边线的 Angular 。

我似乎无法弄清楚我是否需​​要以某种方式处理拆分原始多边形、调整 viewBox 等问题。我们被难住了。

我使用的内联 SVG 相当基础:

* { box-sizing: border-box; }

.btn {
  width: 198px;
  display: inline-block;
  background: transparent;
  margin: 2px 0;
  padding: 0;
  height: 41px;
  text-align: center;
  font-size: 10px;
  line-height: 41px;
  font-weight: 600;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #FFF;
  position: relative;
  transition: all ease-in-out 0.3s; }
  .btn.btnFluid {
    width: auto; }
    .btn.btnFluid svg {
      width: 100%;
      height: 41px; }
  .btn svg polygon {
    fill: #000;
    transition: fill 0.3s ease;
    stroke: #002b5d;
    stroke-width: 2; }
  .btn:hover {
    color: #000; }
    .btn:hover svg polygon {
      stroke: #000;
      fill: #FFF; }
  .btn span {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    padding: 0 25px; }

svg:not(:root) {
  overflow: hidden; }

  

<a href="#" class="btn">
  <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" viewBox="0 0 386.16 80">
    <polygon points="346.14 78 40.02 78 3.19 2 382.97 2 346.14 78"></polygon>
   </svg>
  <span>Read More</span>
</a>
<br><br>
<a href="#" class="btn btnFluid">
  <svg xmlns="http://www.w3.org/2000/svg" class="btn-svg" viewBox="0 0 386.16 80" preserveAspectRatio="none">
    <polygon points="346.14 78 40.02 78 3.19 2 382.97 2 346.14 78"></polygon>
  </svg>
  <span>A much longer cta button label</span>
</a>

我在这里创建了一个可编辑的演示:https://jsfiddle.net/32wcq1zr/1/ -- 比较第一个按钮和第二个按钮的侧边 Angular 。理想情况下，我希望具有第二个按钮的功能，但侧线的 Angular 一致。

Answer 1

对于这种特殊的形状，此处提供的其他选项(使用 pseudo 元素或 masks)是更好的解决方案。但是，对于更复杂的形状，这是一个不错的选择。

---

CSS border-image 已经存在了很长一段时间，reasonably good support , AND 允许 9 切片缩放。

9 切片缩放允许您通过将图像分成代表所有 4 个 Angular 、4 个边和中心的象限来决定图像的每个部分“如何”缩放。

您可以将 border-image 与图像或 SVG 一起使用，但图像更直接。 Chirs Coyer 有一个 good overview .

这是一个使用您的形状的示例

注意:如果您使用的图像尺寸可以简化数学运算，这会有所帮助

(100 像素 x 40 像素，底部插入 20 像素)

a {
  display:inline-block;
  text-decoration: none;
  margin: 10px;
  color: #fff;
  padding: 0 10px;
  border: 20px solid black;
  border-image: url(/image/T8TC6.png);
  border-image-slice: 0 20% fill;
  border-image-width: auto;
}

<a href="#">short</a>

<a href="#">much longer text that causes things to scale</a>

还有一个更复杂的形状来展示它是如何工作的:

a {
  display:inline-block;
	text-decoration:none;
  margin: 10px;
	color: #fff;
	padding: 0 10px;
	border: 20px solid;
  border-image: url(/image/pUwi4.png);
	border-image-slice: 15 fill;
	border-image-width: auto;
	border-image-repeat: round;
}

<a href="#">short</a>

<a href="#">much longer text that causes things to scale</a>