我可以使用 css3 制作这个面包屑吗？答案

【问题标题】：Can I make this breadcrumb using css3?我可以使用 css3 制作这个面包屑吗？
【发布时间】：2026-02-12 23:05:02
【问题描述】：

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

到目前为止，我已经到达this。我可以使用 CSS3 实现这种设计还是必须使用老式的背景图片方法？

【问题讨论】：

对于 CSS3 方法，请考虑SO Answer。

标签： html css gradient psd

【解决方案1】：

简而言之，是的 this is possible with CSS alone（甚至没有 CSS2），但我强烈建议您使用背景图片。

咆哮

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

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

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

【讨论】：

我想对此表示赞同，但我认为我不同意 - 背景图像存在问题。一方面，它们不灵活，需要特殊的工具和技能来编辑，而 CSS 只需要一个文本编辑器和 CSS 知识。我知道你在说什么。
@WesleyMurch 当我说“问题”时，我的意思是它们将在所有浏览器中始终如一地工作。并且背景图像可以在 PC 上的 Paint 中制作，但它们可能也不会显示出来。无论如何，这不是一个确定性的游戏。
知道了，我无法阻止那些想要将 CSS 推向极限的人。过去，我有一个不同大小、颜色和不透明度的 png 库，用于简单的渐变，例如 gradient-black-vertical-200px-80.png。我真的不想这样做。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：