结帐菜单没有图片

Question

在CSS中创建如下所示的结帐（跟踪）菜单的最佳做法是什么。

如何在没有图像的情况下创建此菜单？例如使用CSS三角形？

Answer 1

您可以使用CSS三角形，如CSS-Tricks所述。然后，将CSS-gradient应用于您的背景。哦，并且需要在第一个（也可能是最后一个）元素上应用轻微的border-radius。

不幸的是，据我所知，你不能将CSS渐变应用于三角形部分，因为它的背景实际上是边框的颜色。

而且，渐变在所有浏览器中都不能很好地工作，所以你必须回退到旧版本的普通图像。

<强>更新 当然，正如@BoltClock建议您可以使用单个精灵图像，并伴有:before或:after伪元素。

样本精灵图片：