如何制作三角形截面分隔符[关闭]答案

【问题标题】：How to make triangle section separator [closed]如何制作三角形截面分隔符[关闭]
【发布时间】：2015-05-31 03:36:48
【问题描述】：

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

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

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

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

。

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

【问题讨论】：

可能的重复 - stackoverflow.com/questions/7073484/…
感谢您的链接。这和 zep_fan 答案应该可以解决问题:)

标签： html css integration

【解决方案1】：

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

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

&lt;div class="triangle"&gt;&lt;/div&gt;

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

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

【讨论】：

谢谢。这应该很容易解决问题。
不知道你有没有看到我更新的sn-p；但我将宽度设置为 100%，这会产生不希望的结果。将其更改为 0 是正确的解决方案。
是的，我看到了。事实上，我阅读了Paulie_D's link 并看到宽度必须为 0 :)

【解决方案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;
}

【讨论】：

有点复杂。但有趣的方式来做到这一点。
@hornfl4kes 请注意vw CSS（您接受的答案）确实存在一些浏览器支持问题。 See Here
是的，我知道，但是对于这个项目，我不想完全兼容。但是也非常感谢你的把戏:)

【解决方案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;  
}

【讨论】：