我一直在使用 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 )
最佳答案
同时使用。
CSS
将 CSS 用于基本形状。基本动画。 就像您提到的,当您使用 CSS 生成自定义形状时,您所做的只是添加框阴影的边框,以创建您想要的形状幻觉。有些人可能会说这不是 future 的证据,可能会在任何更新时中断。
SVG
将 SVG 用于更复杂的形状和动画。根据您实现 SVG 的方式,您可以做某些事情。您可以直接或通过 HTML img 标签嵌入它们,您甚至可以使用 javascript 库将它们注入(inject)到您的应用程序中。
SVG 可以通过操纵 svg 本身的样式来制作动画,但是这(取决于您的目标)可能会变成一个非常深的兔子洞。我对 SVG 动画的建议是使用 javascript 库。
我的建议是同时使用两者。首先感受一下 CSS。对我来说,如果你想要快速的东西,这条路似乎更容易学习。也可以尝试 SVG 我过去使用 SVG 库创建了一些很棒的效果,这些效果单独使用 CSS 是不可能的,它们甚至可以在 IE9 中工作(不再支持它)。
TLDR;
将 CSS 用于基本形状和动画。
将 SVG 用于高级形状和动画。
关于html - 我应该使用 CSS 还是 SVG 来显示形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37557757/