Html <；部门>；背景为css三角形

我想使用css三角形作为背景的形状，但我不知道如何做，或者是否可能

最后，它应该是一个看起来像下图的菜单

我已经找到了一些方法，如何做的形状，但我不能适应里面的文字

我只是想知道，如果只使用html和css而不使用图像，是否有可能做到这一点，以及三角形是否是正确的选择

在这个菜单下应该有另一个带有黄色背景的

连接到菜单，这样它将形成一个形状

感谢您的回复和建议

附言：小提琴

我想在左边找到“主页”，但我迷路了

正文{
背景色：
}
.形状{
宽度：960px；
保证金：0自动；
}
.顶{
}
.底部{
宽度：960px；
高度：50px；
填充顶部：25px；
字体系列：“源Sans-Pro”，无衬线；
颜色：#f1c40f；
文本对齐：右对齐；
背景：#f1c40f；/*旧浏览器*/
背景：-莫兹线性梯度（4.5度，#f1c40f 50%，#1c2228 50%）；/*FF3.6+*/
背景：-webkit渐变（线性、左下、右上、色挡（50%，#f1c40f）、色挡（50%，#1c2228））；/*铬、Safari4+*/
背景：-webkit线性梯度（4.5度，#f1c40f 50%，#1c2228 50%）；/*铬10+，Safari5.1+*/
背景：-o型线性梯度（4.5度，#f1c40f 50%，#1c2228 50%）；/*Opera 11.10+*/
背景：-ms线性梯度（4.5度，#f1c40f 50%，#1c2228 50%）；/*IE10+*/
背景：线性梯度（4.5度，#f1c40f 50%，#1c2228 50%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#f1c40f'，endColorstr='#1c2228'，GradientType=1）；/*IE6-9在水平渐变上回退*/
}
特别的{
文本对齐：左对齐；
填充：100px；
颜色：红色；
}
.底部a，a:链接，a:已访问，a:悬停{
颜色：#f1c40f；
背景色：透明；
文字装饰：粗体；
}
.底部a，a：活动{
颜色：#f1c40d；
背景色：透明；
文字装饰：无；
}

你好，世界！	

尝试使用的跨浏览器技术

它是跨浏览器的，，不会产生像素效果

---

这是一个。

如果你想让它看起来清晰，我建议用SVG绘制。哦，太好了！非常感谢！：）我很高兴这是你的有效解决方案！如果你同意我的答案，请将其标记为解决问题的答案！：）我会：）但是，我还有一个“但是”：D这个百分比不适用于边框宽度，所以我计算了这个不能用于引导，对吗？是的，对，但请看这个：你可以用JS实现它。非常感谢：）