css导航下面多个副导航

As I’ve shown previously, it’s completely possible to create an angled navigation using CSS transforms. As part of her new book, Lea Verou shows how to take that idea even further to create diamond frames for images. Inspired by that work, I created the navigation you see above: a series of active links, arranged in a pattern like a chain-link fence.

如前所述，完全有可能使用CSS转换创建角度导航 。 作为她的新书的一部分，莉亚·维鲁(Lea Verou)展示了如何进一步发展这一想法，以创建用于图像的菱形框架。 受到这项工作的启发，我创建了您在上方看到的导航：一系列活动链接，其排列方式类似于链节围栏。

图像作为钻石 (Images As Diamonds)

The central idea of the image diamond frame is fairly straightforward: I’d recommend reading Lea’s book for a complete (and more accurate) description of the method, along with further variations. Broken down into five steps, the basic technique is:

图像菱形框架的中心思想非常简单：我建议您阅读Lea的书，以完整(更准确)地描述该方法，并进行进一步的更改。 分为五个步骤，基本技术是：

步骤1：构图 (Step 1: Frame the image)

Most any element will work as a frame: in the example above I’m using <a> tags to create linked images. The <a> elements are made square by making them inline-block with a set height. I’ve also made the bitmaps square for ease of use, although that isn’t required.

大多数元素都可以用作框架：在上面的示例中，我使用<a>标记创建链接的图像 。 通过将<a>元素设置为inline-block并设置为height ，从而使它们成为正方形。 尽管不是必需的，但我也使位图成为正方形，以易于使用。

步骤2：旋转框架 (Step 2: Rotate the frame)

The frame is turned 45°, rotating the image and any other content inside it.

框架旋转 45°， 旋转图像和其中的任何其他内容。

步骤3：旋转图像以进行补偿 (Step 3: Rotate the image to compensate)

The content of the frame is rotated back by the opposite amount to keep it square. That’s why I’m using <img> tags rather than background images: there is (as yet) no background-transform.

框架的内容向后旋转相反的量以保持正方形。 这就是为什么我使用<img>标记而不是背景图像的原因 ：目前还没有background-transform 。

第4步：缩放图像以填充空间 (Step 4: Scale the image to fill the space)

The squared-up image will not fill the diamond shape, so it is scaled up slightly to compensate.

平方的图像将不会填满菱形，因此会稍微放大以进行补偿。

步骤5：清除溢出 (Step 5: Remove overflow)

Set overflow: hidden on the element to trim any image excess from the outside of the frame.

设置overflow: hidden在元素上，以修剪掉框架外部多余的图像。

Chainlink背景 (Chainlink Backgrounds)

I wanted the three links to sit in the context of other diamond-shaped images. While it would be possible to create these using HTML and CSS, I decided to “cheat” and create it as a background image using PhotoShop.

我希望这三个链接位于其他菱形图像的上下文中。 尽管可以使用HTML和CSS创建这些文件，但我还是决定“作弊”并使用PhotoShop将其创建为背景图像。

This simplified the markup for the gender-normative demo:

这简化了性别规范演示的标记：

<div id="pure-container"><a href="#" id="woman"><img src="woman.jpg" alt><span>Women</span></a><a href="#" id="man"><img src="man.jpg" alt><span>Men</span></a><a href="#" id="child"><img src="child.jpg" alt><span>Children</span></a>
</div>

Due to the fact that the links would be absolutely positioned, the pure-container had to be padded out. The complete CSS:

由于链接绝对定位 ，因此必须填充pure-container 。 完整CSS：

#pure-container { background: url(mesh-grid-background-2x.jpg);position: relative;padding-top: 68%;background-size: cover;overflow: hidden;}
#pure-container a { display: inline-block;position: absolute;width: 33%;height: 48.4%;transform: rotate(45deg);top: 0; overflow: hidden;opacity: 0.5;transition: .6s opacity;color: #fff;font-family: Avenir, sans-serif;text-transform: uppercase;letter-spacing: .2rem;font-size: .5rem;text-shadow: 0 0 5px rgba(0,0,0,0.4);}
#pure-container a:hover, #pure-container a.highlighted { opacity: 1;
}
#pure-container a span { display: inline-block;transform: rotate(-45deg);position: relative;z-index: 5;text-align: center;width: 100%;left: 25%;top: -36%;font-size: 2rem;
}
#pure-container a img { width: 100%;transform: rotate(-45deg) scale(1.4);
}

As I mentioned, each link must be positioned absolutely, using relative units so that the entire design remains responsive:

如前所述，每个链接必须使用相对单位进行绝对定位，以便整个设计保持响应速度 ：

a#woman {margin-top: 3.2%;left: 34.4%;
}
a#man {margin-top: 26.4%;left: 11%;
}
a#child {left: 57.8%;margin-top: 26.5%;
}

There’s also some media queries to tidy up the presentation at smaller screen sizes; you can inspect that on the CodePen demo.

还有一些媒体查询可以在较小的屏幕尺寸下整理演示文稿。 您可以在CodePen演示中进行检查。

翻译自: https://thenewcode.com/1028/CSS-Diamond-Mesh-Navigation

css导航下面多个副导航