如何仅使用 jquery 和 css3 制作有角度的选项卡界面？
这是我的目标。有角度的选项卡，透明的位于另一个选项卡的顶部。我如何在不使用 jpg 或 pngs 而仅使用 css 的情况下构建它？
This is my goal. Angled tabs with transparency on top of the other. How would i build this without using jpgs or pngs, but only css?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这个啧啧声会让你继续前进，但我会尝试在一分钟内模拟一些东西！
http://www.howtocreate.co.uk/tutorials/css/slopes
http://net.tutsplus.com/articles/news/ fun-with-css-shapes/
顺便说一句，好问题！
编辑：
这是“最终”结果：
查看它 这里！
注意：
请注意，这是一个“黑客”，并且它可能不是实际实现它的最佳想法，我认为（现在无法尝试）IE 对此有一些问题，如果您询问可用性和可访问性，我会说用图像:)
This tuts will get you going but I'll try to mockup something in a minute!
http://www.howtocreate.co.uk/tutorials/css/slopes
http://net.tutsplus.com/articles/news/fun-with-css-shapes/
BTW great question!
Edit:
Here is the "final" result:
See it here!
NOTE:
Just be aware that this is a "hack" and that it might not be the best idea to actually implement it, I think (can't try it now) IE has some issues with this, if you asked about usability and accessibility, I would say go with images :)
是否必须使用 CSS，或者您只是希望不使用光栅图像？例如，您可以使用 SVG 背景图像，它的文件大小可能比光栅图像更小，并且缩放效果更好。如果您担心 HTTP 请求，可以使用数据 uri。如果您不想使用背景图像，您也可以使用 SVG 或 png 作为边框图像。
Does it have to be with CSS, or are you just hoping not to use raster images? You could for example use an SVG background image, which will likely be a smaller file size than a raster image and will scale better. You can use a data uri if you are worried about HTTP requests. You could also probably use an SVG or png as a border-image if you don't want to use background-image.
我对此的看法是使用 CSS 来创建角度：
http://www.howtocreate.co.uk/tutorials/css/slopes
或者
http://www.dinnermint.org/blog/css/creating- triangles-in-css/
您将选项卡的“结束”部分创建为白色/黑色的角度，然后使用 jquery 应用透明度和选择。
这应该可以帮助您在没有图像的情况下开始。
My take on this would be to use CSS to create angles:
http://www.howtocreate.co.uk/tutorials/css/slopes
or
http://www.dinnermint.org/blog/css/creating-triangles-in-css/
You create the 'end' piece of the tab as an angle that is white / black, and then use jquery to apply transparency, and selection.
That should help you start without images.