像 2020 年一样创建对角线布局

Nils Binder 介绍了这些方法

1. 使用三角形的 SVG。Erik Kennedy 在 CSS-Tricks 上很好地描述了这种技术。
2. 使用 clip-path 隐藏部分内容。阅读 Sebastiano Guerriero 的 CSS 中的对角线容器或 Kilian Valkhof 的 CSS 中的斜边。
3. 使用 CSS 变换

我通常会使用 #2 方法——稍微切掉顶部和底部，确保有足够的填充，然后就完事了。但是 Nils 几乎说服了我这种花哨的数学方法更好。

这是一个有点笨拙的 clip-path 方法

以及 Nils 令人难以置信的花哨游乐场

直接链接 →

Chris Coyier

# 2020 年 4 月 9 日

哦，对了，说到酷炫的操作符……

https://getwaves.io/

https://wweb.dev/resources/css-separator-generator

Antoine

# 2020 年 4 月 12 日

您好，

也许不需要在 Nils 的优秀示例中“手动”（或在 javascript 端）预先计算基于切线的魔术数字？

--skew_deg: -10; /* Specify angle here */

--a: calc(var(--skew_deg) * 3.14159 / 180); /* Deg to rad without unit */

--angle: calc(1rad * var(--a)); /* Keep the previous angle var */

/* Now compute the magic number in css, using taylor serie */

--magic-number: max(calc((var(--a) + (1 * var(--a) * var(--a) * var(--a) / 3) + (2 * var(--a) * var(--a) * var(--a) * var(--a) * var(--a) / 15)) / 2), calc((var(--a) + (1 * var(--a) * var(--a) * var(--a) / 3) + (2 * var(--a) * var(--a) * var(--a) * var(--a) * var(--a) / 15)) / -2));

如果可以的话，我喜欢避免使用 javascript。
我不是专家，所以我希望我的评论不是一个糟糕的建议；）。

Frank Conijn

# 2022 年 5 月 20 日

如果您希望文本也倾斜，Nils 的倾斜方法更好。实际上这是唯一的方法。

但是如果您希望文本保持水平，我发现 clip-path 方法更容易。这只是理解多边形变体的问题，这很容易：四个角，每个角都有一个水平变量和一个垂直变量。

此评论线程已关闭。如果您有重要信息要分享，请联系我们。