jquery - 具有特定形状的 div

Question

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

Answer 1

该网站使用背景图像来实现外观，更具体地说，它使用了一种称为sprite（或 CSS sprites）的技术。

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

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

这是他们在您链接到的网站上使用的精灵：

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

您可以看到精灵图像顶部的四个框。这是第二个盒子（团队）如何使用精灵图像的正确部分的示例

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

Answer 2

你不需要一个库，它只是 CSS。

在您链接到该站点的页面中，似乎使用图像精灵作为背景图像来创建扭曲（插入/外置三角形）形状的错觉，但可以使用可以处理伪元素的兼容浏览::before器来模拟这种错觉::after：

.box {
    width: 150px; /* or whatever */
    height: 150px;
    background-color: #f90; /* adjust to your taste */
    padding: 0.5em;
    position: relative; /* required to position the pseudo elements */
    margin: 0 auto; /* used to move the box off the edge of the page, adjust to taste */
}

.box::before {
    content: ''; /* required in order for the ::before to be visible on the page */
    position: absolute;
    top: 50%;
    left: 0;
    margin: -25px 0 0 0; /* to position it vertically centred */
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left: 25px solid #fff; /* forms the triangular shape on the left */
}

.box::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    margin: -25px -50px 0 0;
    border-right: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-top: 25px solid transparent;
    border-left: 25px solid #f90;
}​

JS 小提琴演示。

请注意，使用这种方法存在问题：

1. 页面的背景无法通过左侧的三角形显示（因为它是纯白色），如果您制作该三角形，transparent那么您将通过边框看到，但只能看到.box div元素的背景颜色。

2. 定位::before和::after伪元素position: absolute意味着这些元素出现在div. 所以你可能需要调整padding那个div和border-width伪元素来减少这个问题，这只是一个演示。