Jquery 特殊形状的div

我需要创建一个水平导航栏，其形状类似于此链接中“团队”和“合作”div中使用的形状。有没有这样的图书馆

这不需要库，它只是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;
}​

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

页面的背景无法通过左侧的三角形显示（因为它是纯白色），如果将三角形

设置为透明的
，则可以看到整个边框，但只能看到
.box
div
元素的背景色

将

：：在
之前和
：：在
之后的伪元素定位为
位置：绝对
意味着这些元素出现在
div
中的文本上方。因此，您可能需要调整
div的
填充
和伪元素的
边框宽度
，以减少该问题，这只是一个演示

---

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

该技术本质上只是使用一个包含多个图像的图像，每个图像单独使用。单个图像通过

背景位置

规则使用，该规则允许您从本质上选择要使用的大图像的哪一部分。该技术的主要目的是减少HTTP请求的数量，以加速页面的加载

请参阅以获得更好的解释

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

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

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

---

该网站使用背景图像来实现该效果。AFAICS只有“活动”按钮才能获得背景图像以产生“语音泡泡”效果-其余都是圆角。啊-那些链接-我正在查看顶部菜单栏中的链接！