用箭头创建矩形DIV

Question

我刚刚开始进入CSS,初步实验非常好!我找到了带弹出框和CSS样式等的Feed!但是,我想突破我所知道的界限......

我正在尝试实现一个矩形的样式DIV(没有问题),但是有一个箭头指向导航栏上的图标,请参见下图,包括框边框,以及DIV本身高度不同的地方(尽管箭头始终保持相同的高度/宽度).

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

提前致谢.

Answer 1

为了获得广泛的浏览器支持，您应该使用背景图像来实现这一点。您可以查看多种资源和教程。我对这本书的建议是：

• Pro CSS and HTML Design Patterns - 优秀的书，其中有一个关于使用 bg 图像设计 div 的部分（代码在这里- 这个示例是圆角的，您现在可以使用 CSS3 标签通过良好的支持来实现，但可以让您了解如何达到你想要的任何边框效果）

当然，如果您搜索背景图像 div 样式，您会发现许多关于如何实现此类效果的示例。