用箭头创建矩形DIV

Question

我刚刚开始更多地使用CSS，最初的实验非常好！我找到了带弹出框和CSS样式等的Feed！但是，我想突破我所知道的界限......

我正在尝试实现一个矩形的样式DIV（没有问题）但是有一个箭头指向导航栏上的图标，请参见下面的图片，其中包括框边框，以及DIV本身可以在哪里高度不同（尽管箭头始终保持相同的高度/宽度）。

任何人都可以指出我正确的方向 - 或者我是否想做更多的事情！？

提前谢谢。

Answer 1

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

• Pro CSS and HTML Design Patterns - 优秀的书籍，其中有关于bg图像样式div的部分（code here - 此示例适用于圆角，现在您可以使用CSS3标记获得良好支持，但为您提供了解如何实现您想要的任何边界效果）

当然，如果你四处寻找背景图像div样式，你会发现很多关于如何实现这种效果的例子。

Answer 2

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

我借了他们向下箭头一次，它的效果非常好。