三角形截面分离器的制作方法

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。

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

三角形截面分离器的制作方法

How to make triangle section separator

html

css

integration