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

Question

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

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

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

我在这里谈到蓝线顶部的部分：

。

您知道是否可以使用CSS规则来执行此操作？ 如果是这样，我该怎么做？

Answer 1

这样的事应该做​​。使用vw（视口宽度）来跨越整个容器。

.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。

Answer 2

这是一个CSS3方法：

JSFIDDLE

<强> HTML

<section class="diagonal">

<强> CSS

body {
    background: #333;
    margin: 0px;
}
section {
    position: relative;
    margin-top:100px;
}
section:before {
    position: absolute;
    content:'';
}
.diagonal {
    background: teal;
    z-index: 1;
    padding: 3em;
}
.diagonal:before {
    -webkit-transform: rotate(-3deg);
    transform: rotate(-3deg);
    -webkit-transform-origin: 3% 0;
    transform-origin: 3% 0;
    top: 0;
    left: -25%;
    z-index: -1;
    width: 150%;
    height: 75%;
    background: inherit;
}

Answer 3

在容器顶部使用绝对定位的边框偏移：

https://jsfiddle.net/Levde3kj/1/

HTML：

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

CSS：

.container {
    float: left;
    width: 400px;
    height: 200px;
    margin-top: 25px;
    background-color: blue;
    position: relative;
}
.container .triangle {
     position: absolute;
     top: -25px;
     left: 0;
     border-style: solid;
     border-width: 0 0 25px 400px;
     border-color: transparent transparent blue transparent;  
}