CSS 冰山

Source: Dev.to

概览

CodePen 每周举办一次编码挑战，本周的主题是 Winter（冬季），聚焦 Ice and Snow（冰与雪）。我决定通过绘制一座漂浮在海面上的冰山来参与。

我在网上找到了一个我喜欢的 iceberg image online，并觉得用 CSS 重新实现它会很有趣。经过多次尝试不同元素后，我最终采用了单一元素的方案，仅使用 CSS——不需要额外的 HTML 元素。

每当我在 CodePen 上分享零元素绘图时，我都会加上一小段免责声明：虽然 HTML 面板看起来是空的，但实际上仍然有一些 HTML。具体来说，我依赖 “ 元素，以及它的 ::before 和 ::after 伪元素来创建作品。

还有一种方法可以实现真正的零 HTML 设置，即将样式直接应用到 :root 并强制浏览器渲染 CSS（这仅在 Apache 和 Firefox 中有效）。因此，从技术上讲，这幅画可以仅使用纯 CSS 完成，完全不需要 HTML 元素。

实现细节

• body – 使用线性渐变渲染天空，并添加两个 conic-gradient 阴影。
• body::before – 绘制冰山，使用 clip-path 进行形状裁剪，并通过圆锥渐变进行阴影处理。
• body::after – 通过重复的水平径向渐变以及用于深度的线性渐变来创建水面和波浪。

演示

您可以在 CodePen 上查看 实时演示 并探索 源代码。