html - 我应该使用 CSS 还是 SVG 来显示形状？

Question

我一直在使用 CSS 在我的网站上玩弄形状，这一切都很好，但有时在操作它们时有点烦人，因为例如三 Angular 形，它实际上是一个带边框的矩形。

有关在 CSS 中创建形状的指南，我使用的是 CSS-tricks article关于它。

我想使用 CSS，因为它的加载速度比我使用图像要快。

几天过去了，我偶然发现了 SVG，我一直在网上看到它们，但从未深入研究过它们。所以，我想知道，使用 SVG 而不是这些 CSS“hacks”来实现我的形状会不会更简单。无法找到有关此特定主题的任何详细信息，因此非常感谢有关 SVG 的任何信息。(这些形状将超过 1000 像素宽，因此我不想使用图像...)

TL;DR:什么更好 - 跨浏览器/加载时间明智 - 当想要在网页上有形状时。我只是研究了 SVG，想知道它是否是一个可行的选择。

---

编辑

抱歉，下面是我目前正在使用的实现效果的代码，以及我希望实现的图像(不幸的是，设计图像的人没有提供设计代码，仅图片)。

来源图片

我的代码 (如果您不喜欢 sass，抱歉)

<div class="arrow-wrap">
  <div class="arrow">
    <div class="arrow-text">
      <h1>Services</h1>
      <p>Learn more about our services by selecting one below</p>
    </div>
  </div>
</div>

.arrow-wrap
    overflow: hidden;
    display: flex
    justify-content: center
    position: relative
    z-index: 10
    .arrow
        width: 0
        height: 0
        border-style: solid
        border-width: 150px 100vw 0 100vw
        border-color: $dark transparent transparent transparent
        position: relative
        z-index: 1
        display: flex
        justify-content: center
        .arrow-text
            text-align: center
            margin-top: -130px
            white-space: nowrap
            position: relative
            z-index: 5
            h1
                font-size: 50px
                margin: 0
            p
                margin: 0
                color: rgba($white, 0.8)

我的结果图片

因此，由于我不得不四处乱逛以使文本正常工作(在缩放方面仍然不完美)，我想知道是否采用 SVG 的方式，也就是说，如果 SVG 是更高效地完成工作/加载时间。

---

编辑 2

还只是想 - 在顶部增加更多空间 - 添加实心框阴影以营造一种不规则五边形的错觉 ( Found on YouTube here )

Answer 1

同时使用。

CSS

将 CSS 用于基本形状。基本动画。 就像您提到的，当您使用 CSS 生成自定义形状时，您所做的只是添加框阴影的边框，以创建您想要的形状幻觉。有些人可能会说这不是 future 的证据，可能会在任何更新时中断。

SVG

将 SVG 用于更复杂的形状和动画。根据您实现 SVG 的方式，您可以做某些事情。您可以直接或通过 HTML img 标签嵌入它们，您甚至可以使用 javascript 库将它们注入(inject)到您的应用程序中。

SVG 可以通过操纵 svg 本身的样式来制作动画，但是这(取决于您的目标)可能会变成一个非常深的兔子洞。我对 SVG 动画的建议是使用 javascript 库。

我的建议是同时使用两者。首先感受一下 CSS。对我来说，如果你想要快速的东西，这条路似乎更容易学习。也可以尝试 SVG 我过去使用 SVG 库创建了一些很棒的效果，这些效果单独使用 CSS 是不可能的，它们甚至可以在 IE9 中工作(不再支持它)。

TLDR;

将 CSS 用于基本形状和动画。

将 SVG 用于高级形状和动画。