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

Question

我一直在使用CSS在我的网站中玩弄各种形状，现在还可以，但是在操作它们时有时会有些烦人，因为例如三角形，它实际上是带有边框的矩形。

对于CSS中的形状创建指南，我正在使用有关CSS技巧的文章。

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

几天过去了，我偶然发现了SVG，我一直在网上看到它们，但从未研究过它们。因此，我想知道，使用SVG代替这些CSS“ hacks”来实现形状会更简单吗？找不到有关此特定主题的任何受污染的信息，因此，感谢您提供有关SVG的任何信息。（这些形状的宽度将为1000px +，因此为什么我不想使用图片...）

TL; DR：更好的方法- 跨浏览器/加载时明智 -希望在网页上具有形状时。我只是看着SVG在想这是否可行。

---

编辑

抱歉，下面是我目前正在使用的代码，以及我要实现的图像（不幸的是，设计图像的人并未提供设计代码，仅提供了图像） 。

源图像

我的代码 （抱歉，如果您不喜欢无礼）

<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

还只是想着-在顶部增加更多的空间-添加实心的盒子阴影，以产生一种不规则五边形的错觉 （可在YouTube上找到）

Answer 1

两者都用。

CSS

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

SVG

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

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

我的建议是同时使用两者。首先感受一下 CSS。对我来说，如果您想要快速完成任务，这条路线似乎不那么受阻并且最容易学习。也试试 SVG 我过去使用 SVG 库创建了一些很棒的效果，这是单独使用 CSS 无法实现的，它们甚至可以在 IE9 中工作（不再支持它）。

TLDR；

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

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