Question

我一直在使用 CSS 在我的网站上玩形状，它已经好了，但在操纵它们时有点恼人，因为例如一个三角形，它实际上是一个带有边框的矩形。

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

我想使用 CSS，因为它会比使用图像加载得更快。

几天过去了，我偶然发现了 SVG，我一直在网上看到它们，但从未深入研究过它们。所以，我想知道，使用 SVG 而不是这些 CSS“hacks”来实现我的形状会更简单吗？找不到关于这个特定主题的任何真实信息，所以任何关于 SVG 的信息都值得赞赏。（这些形状将是 1000px + 宽，因此我没有使用...）

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)

My outcome image

所以，因为我不得不把周围的文字工作（缩放仍然不完美），我想知道是否走 SVG 的路线将是这样的，那就是如果 SVG 的更有效的在完成工作 / 加载时间。

也只是在想-在顶部增加更多的空间-添加一个实心框阴影，以产生一种不规则的五边形（Found on YouTube here）

7

4

Answer 1

两者都用。

CSS公司

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

SVG

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

SVG 可以通过操纵 svg 本身的样式进行动画处理，但是这（取决于你的目标是什么）可以成为一个非常深的兔子洞。我对 SVG 动画的建议是使用 javascript 库。

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

太长，读不下去了

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

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

Answer 2

所以要回答原来的问题：

如果您正在考虑将数据从 http 服务器传输到连接客户端的时间，则 CSS 显示形状的速度要快得多，只要形状是没有动画且不包含自定义曲率或路径或多个图层的简单图形。

SVG 主要是用于动画和复杂艺术品的工具。

基本上有两种方法来呈现更复杂的动画和绘图（我的意思是复杂的，如在网页上的俄罗斯方块游戏或东西）

您可以使用 SVG 或 CANVAS。（还有其他第三方插件，如 shockwave / flash 等）

但基本上，Canvas 是更容易使用的替代 SVG 的一个原因：它的 javascript 友好。

您还可以使用 Javascript 绘制 SVG 内联元素，但如果没有像 SVG.JS 或 SWAP.JS 这样的附加 JavaScript 库，它就不那么简单了

另一方面,SVG 比 canvas 更容易缩放到不同的大小。您可以简单地更改 SVG 元素的视口,并实现已缩放的图像。HTML5 canvas 可以更加 frutstrating 缩放到正确的大小。

CSS 在加载方面具有更轻量级和更快的优势，但是要做复杂的多层动画和其他事情（例如图层蒙版 / 着色器效果）要困难得多，因为您必须手动计算所有简单的几何形状，而不是让计算机来做。

因此，话虽如此，您可以在 SVG，CSS 和 HTML5 CANVAS 之间进行选择来呈现您的图像。大多数好的网页都有这三种的组合，因为有些网页在不同方面比其他网页更好。

我在下面附加了一个示例，说明如何使用您提供的代码以及 HTML5 Canvas 动态创建形状。

.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)
}
</style

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; cht=utf-8">
</head>
<body>
  <div class="arrow-wrap">
    <div>
      <div class="arrow-text">
        <h1 class="arrow">Services</h1>
        <p>Learn more about our services by selecting one below</p>
      </div>
    </div>
    <div class="arrow"><a href="#">My Service 1</a>
    </div>
    <div class="arrow"><a href="#">Service 2</a>
    </div>
  </div>
</body>
<script>
  var canv_active_id = 0;
  // find al elements of arrow class
  var x = document.getElementsByClassName("arrow");
  var i;
  for (i = 0; i < x.length; i++) {
    // create a canvas element with uniqueID
    var canv = document.createElement('canvas');
    canv.id = "canvas" + canv_active_id;
    canv.width = 21;
    canv.height = 24;
    canv.style.width = x[i].innerWidth * 0.05;
    canv.style.height = x[i].innerHeight * 0.55;
    //place the canvas element at the start of 
    //element
    var old_html = x[i].innerHTML;
    x[i].innerHTML = "";
    x[i].appendChild(canv);
    x[i].innerHTML += old_html;
    // get canvas context
    var ctx = document.getElementById("canvas" + canv_active_id).getContext('2d');
    // setup viewport
    ctx.scale(canv.style.width, x[i].innerHeight);
    ctx.save();
    ctx.transform(1.000000, 0.000000, 0.000000, 1.000000, -126.526770, -266.500710);
    // perform drawing by using lineTo()
    // #path4138
    ctx.beginPath();
    ctx.globalAlpha = 0.7;
    ctx.miterLimit = 8.19999981;
    ctx.lineWidth = 1.000000;
    ctx.fillStyle = 'rgba(215, 238, 244, 0.7)';
    ctx.moveTo(126.526770, 266.500710);
    ctx.lineTo(137.339480, 271.799980);
    ctx.lineTo(148.152170, 277.099260);
    ctx.lineTo(137.408870, 284.043060);
    ctx.lineTo(126.665560, 290.986860);
    ctx.lineTo(126.596160, 278.743780);
    ctx.fill();
    ctx.restore();
    //increase unique ID
    canv_active_id++;
  }
</script>
</html>

如果你要有大量的形状 CANVAS 可能是要走的路，那么它可能不会。你必须根据页面的内容做出决定。