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

我必须做一个模型的集成。但我想知道是否有一种方法可以只在CSS中实现

我们有一个（对角线）三角形部分分隔符，我不知道如何在CSS中创建它们（除了图像或svg）。如果这是可能的话

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

我指的是蓝线顶端的部分：

你知道是否可以用CSS规则来做吗？

---

如果是这样，我该怎么做呢？

像这样的事情应该可以。使用

vw

（视口宽度）跨越整个容器

.triangle{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 0 30px 100vw；
边框颜色：透明透明#007bff透明；
}

这里有一个CSS3方法：

HTML

<section class="diagonal">

---

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

HTML:

---

可能是小白鼠-谢谢你的链接。这和zep_fan的回答应该会起作用：）谢谢。这应该很容易做到。我不知道你是否看到了我更新的代码片段；但是我将宽度设置为100%，这产生了不希望的结果。将其更改为0是正确的解决方案。是的，我看到了这个。事实上，我读了这篇文章，看到宽度必须是0:）有点复杂。但这是一个有趣的方法。@hornfl4kes请知道

vw

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;
}

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

.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;  
}