html - 我可以使用 css3 制作这个面包屑吗？

Question

我一直在尝试使用 CSS制作这个PSD ？

到目前为止，我已经达到了这一点。我可以使用 CSS3 实现这个设计，还是必须使用老派背景图片方法？

Answer 1

简而言之，是的，这可以单独使用 CSS（甚至没有 CSS2），但我强烈建议您使用背景图像。

咆哮

像这样做 CSS 的问题是阴影。它呈现三角形的方式只是一个在对角线上透明的边框。换句话说，你的影子仍然是一个盒子，看起来不像你想要的那样。

我看到很多人开始使用 CSS3。他们通常希望一切都动态完成，而不是使用背景图像。一旦完成，大量的 CSS 几乎不会为页面做任何美观的事情。实际上，只需要它们最终得到的 10-15% 即可达到与图像相同的效果。

背景图像没有任何问题，它们不会过时，而且它们肯定不会很快停止工作。我的建议是，对于需要图像的东西坚持使用背景图像，并保存 CSS3 以获得特殊效果。这听起来很无聊和老派，但它很有效，而且要容易得多。

Answer 2

这似乎是一个相对简单的 CSS 项目；简单，这里是相对的，因为我看到人们仅使用 CSS 制作动画 Twitter Fail Whale。
对于三角形边缘（我认为这对您来说是棘手的部分），您将要做的是使用 CSS 矩阵变换（在W3Schools详细说明），然后仅box-shadow用于边框和box-shadow: inset插图影响。之后，只需使用适当的填充和文本对齐来使文本在对象的每个部分居中。

编辑考虑使用before和after伪元素来实现这一点。<div>或者，您可以为每个部分使用两个相互堆叠的倾斜s；然而，这不会给你一个有吸引力的阴影。

Answer 3

我认为仅靠 CSS 是不可能的。您将不得不使用背景图像。您将能够使用 :after 和 :before 伪类创建锥形边缘效果。但是会面临内部阴影的问题。

当我在 Google 帮助中心看到面包屑（类似，但使用背景图片）时，我曾经尝试单独使用 css3 创建类似的面包屑，但无法做到。

http://support.google.com/adsense/bin/answer.py?hl=en&answer=1354760

我尝试使用 CSS（:after 和 :before）伪元素来实现，而不添加任何其他 html 元素。