如何制作三角形截面分隔符

Question

我必须做一个模型的集成。但我想知道是否有办法只在 CSS 中做到这一点。

我们有一个（对角线）三角形部分分隔符，我不知道如何在 CSS 中制作它们（图像或 svg 除外）。如果这甚至可能？

我的分隔符如下所示： . （它是该部分顶部的一个巨大的矩形三角形）。

我说的是这里蓝线顶部的部分：

.

你知道是否可以用 CSS 规则来做到这一点？如果是这样，我该怎么做？

Answer 1

这样的事情应该做。使用vw(viewport-width) 跨越整个容器。

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 30px 100vw;
  border-color: transparent transparent #007bff transparent;
  }

<div class="triangle"></div>

您可以将其附加到:before容器上的伪选择器。

但是，您必须为跨浏览器兼容性做一些工作。有关支持的浏览器的更多信息和更新，请参阅关于此的caniuse。