我正在开发一个具有特定布局的Web应用程序.
我主要使用CSS来设置按钮的样式并使用div并将它们设置为其他布局项.
问题是有时我需要一个布局项非矩形.
此外,设计SVG更容易,有时可能产生更好的结果.
我的问题是：我应该总是使用CSS作为布局,例如 – 组合div来实现非矩形效果 – 或者我应该将SVG用于某些布局项目？
还有 – 按钮 – CSS还是SVG呢？
谢谢！
可以使用旧版本的IE来支持SVG – 有许多Javascript库可以将SVG转换为VML,这是微软专有的SVG替代品.但是,这确实意味着您不必要地运行Javascript代码;你可能会在IE中导致性能问题,或者更糟糕的是,它可能加载得足够慢,以至于布局在加载后重绘.
因此,出于跨浏览器兼容性原因,我建议不要将SVG用于基本页面布局.
我将使用SVG用于图形和图表等.对于这些,我将使用Raphael javascript库,这使得绘制SVG非常容易,并且在IE中将其呈现为VML,而无需进行任何显式转换.
为了在CSS中创建非正方形元素,有一个使用CSS边框绘制三角形和其他形状的hack.这适用于所有浏览器(在IE6中有一些小的注意事项),因此非常适合创建标记箭头和语音气泡等点效果.
有关详细信息,请参阅http://jonrohan.me/guide/css/creating-triangles-in-css/.
非常适合现场效果,但应该强调我不会推荐它用于复杂的形状;我看到有些人用它绘制整张照片 – 见http://www.cssplay.co.uk/menu/fivestar和同一网站上的其他黑客 – 但正如我所说的,我不建议实际这样做,只是为了演示像这样的黑客.
希望有所帮助.
[编辑]
根据OP的评论,他只想将一个矩形突出部分添加到一个更大的矩形< div>,所以实际上他试图创建的形状并不是那么复杂;事实上,它听起来很像一个标签.鉴于此,到目前为止最好的建议是忘记使用SVG绘制它,并简单地创建两个div：一个用于主要内容,一个用于选项卡.如有必要,可以创建第三个div来包装另外两个.这可能有助于通过CSS或Javascript一起引用其他两个.
