html - 你将如何编码这个 : Grid-breaking shapes

Question

我是一个从榜样中学习最好的人。目前，在开发桌面应用程序 15 年后，我正投身于 Web 开发领域。我仍然习惯了用于开发现代网站的所有网络技术，无论我在哪里，我都会看到很酷的小 UI 元素，并质疑它们是如何实现的。所以我想我会问问你们，网络专家……专家 :)

有哪些直接或有创意的方法可以编写这个打破网格的箭头...

这个页面的基本布局看起来像...

1. html/css 代码是什么样的？
2. 您会将图片拆分为多张图片还是使用单张图片？

我敢肯定这是一个非常简单的概念，它完全让我感到困惑。如果这是一个奇怪的问题，我很抱歉，记住我是菜鸟! :)

在此先感谢您的帮助!

这是一个 link转到我找到这些图像的原始教程

Answer 1

如果您查看模型，页眉面板包括从绿色框顶部到框底部的高度。

background: green url(images/header-bottom.jpg) no-repeat bottom left;

该 jpg 文件包括最后 70 个高度像素，包括整个箭头。由于您的标题和导航位于箭头指向的位置下方，因此容器将完全按照您的显示方式显示。

这还使您能够让子菜单和内容仅具有背景颜色，因为您在这两个区域中似乎拥有的唯一渐变与标题面板中的箭头位于同一区域。