jquery - 具有特定形状的div

Question

我需要创建一个水平导航栏，其形状类似于此链接中“团队”和“合作”div 中使用的形状。是否存在一个图书馆？ LINK

Answer 1

本网站使用背景图像来实现外观，更具体地说，它使用了一种称为 spriting 的技术。 (或 CSS Sprite )。

该技术本质上只是使用一个包含多个图像的图像，每个图像单独使用。单个图像通过 background-position 规则使用，该规则允许您从本质上挑选并选择要使用大图像的哪一部分。该技术的主要目的是减少 HTTP 请求的数量，以加快页面加载速度。

请引用http://css-tricks.com/css-sprites/以获得更好的解释。

这是他们在您链接到的网站上使用的 sprite:

http://hitmo-studio.com/images/sprites-set-1.png

您可以看到 sprite 图像顶部的四个框。这是第二个盒子(团队)如何使用 Sprite 图像的正确部分的示例

.list-c li.team a {
background-position: -246px 0;
}