用箭头创建矩形DIV

Question

我刚刚开始进入CSS，初始实验非常棒！我找到弹出框和CSS样式等我的饲料！然而，我想推动我所知道的一些界限...

我想要实现一个样式的DIV（没有问题）是矩形的，但有一个箭头指向导航图标条，见下图，其中包括框边框，DIV本身的高度可以变化（尽管箭头始终保持相同的高度/宽度）。

任何人都可以点我在正确的方向 - 还是我试图做多可能！？

谢谢，提前。

Answer 1

对于广泛的浏览器支持，您应该使用背景图像来做到这一点。有几种资源和教程可以查看。我建议你这本书：

• Pro CSS and HTML Design Patterns - 这对造型的div BG图像（code here一款优秀的书 - 这个例子是圆角的，你可以很好的支持CSS3使用的标签，现在实现的，但为您提供了如何实现你想要的任何边界效应）

和当然，如果你谷歌周围背景图像的DIV的造型，你会发现如何实现这一类型的效果很多示例的理解。

Answer 2

vimeo.com实际上是用纯CSS做的，除了箭头指向下方。学习新CSS的一个好方法是使用Firefox + Firebug或者Chrome，学习如何从其他站点“借”CSS。

我向他借了一下指向箭头，它工作得很好。