CSS3建议，没有图像只是CSS

Question

是否可以在不使用图像的情况下创建以下内容，只需使用css3？

Answer 1

是的。您想要查找的相关内容包括渐变，文本阴影和2D变换。

你需要做得更好，接受你提出的问题的答案，并提出问题，表明你已经尝试过，然后才会得到更好的答案。如果你没有努力尝试自己做，那么人们就不会给你代码。

Answer 2

是的，这是可能的。

CSS border-radius，gradient，text-shadow和@ font-face将为您提供相当多的帮助。

那些有角度的标签将是一个巨大的痛苦，以正确，并可能有跨浏览器问题。您可能能够使用CSS transform来正确使用它们，但它需要单独的DOM元素用于边缘，否则您也将转换文本。

标签底部的向外曲线也很棘手。我看不到一种简单的方法来实现这一点。

假设您的目标是在没有图像的情况下进行，而不是简单地作为CSS练习，那么更好的解决方案可能是使用SVG。您可以将SVG作为元素合并到页面中，因此不需要单独下载，并且实现您想要的结果应该相当简单 - 当然比使用纯CSS更容易。

SVG不适用于旧版本的IE（IE8及以下版本），但由于您在询问CSS3，我认为这对您来说不是问题。如果这是一个问题，那么您可以使用像Raphael或SVG2VML这样的库来动态转换SVG到VML。