Question

我需要创建一个水平导航栏，其形状类似于此链接中“team”和“cooperation”div中使用的形状。是否存在一个库？ LINK

Answer 1

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

该技术基本上只是使用包含多个图像的一个图像，每个图像单独使用。单个图像通过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。

在链接到该网站的页面中，似乎使用image sprite为背景图像创建了扭曲（插入/偏移三角形）形状的错觉，但是可以使用兼容的浏览器模拟它可以处理::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 Fiddle demo

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

页面的背景无法通过左边的三角形显示（因为它是纯白色），如果你制作了那个三角形transparent，那么你会透过边框看到但只能看到.box div元素的背景颜色。
使用::before定位::after和position: absolute个伪元素意味着这些元素会显示在div的文本上方。所以你可能需要调整padding的{{1}}和伪元素的div以减少这个问题，这只是一个演示。

具有特殊形状的div

2 个答案: