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

Question

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

到目前为止,我已达到此目的.我可以使用CSS3实现这个设计还是我必须使用旧学校的背景图像方法？

Answer 1

简而言之,是的,这可以单独使用CSS(甚至没有CSS2),但我会建议您使用背景图像.

咆哮

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

人们开始使用CSS3,我看到了很多.他们通常希望动态完成所有操作而不是背景图像.一旦完成,就会有一大堆CSS在页面上几乎没有美观的东西.实际上,它只需要10-15%的最终效果来实现与图像相同的效果.

背景图像没有任何问题,它们不会过时,它们肯定不会很快停止工作.我的建议是,坚持使用背景图像来处理需要图像的内容,并为特殊效果保存CSS3.这听起来很无聊和老派,但它起作用并且更容易.

Answer 2

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

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

我尝试使用CSS（：after和：before）伪元素来做到这一点，而不添加任何其他html元素。