div底部的CSS三角形有渐变

Question

我现在已经摆弄了几个小时，而且我还没有到达任何地方（除了弄清楚什么不会起作用）所以我想我会问。< / p>

基本上，我有一个45度渐变的div。我想要做的是具有三角形的效果＆＃34; cutout＆＃34;切入它下方的div。我尝试了一些不同的东西，但主要的问题似乎是因为div跨越窗口，当窗口调整大小时，渐变的大小也会改变。我甚至将颜色值硬编码到三角形的渐变中以使它们匹配，但显然在调整窗口大小时会破坏。我在制作三角形的CSS边框方法上遇到了同样的问题。

附件是div的屏幕截图，我希望下面有三角形。它需要跨浏览器。

这是可以做到的吗？或者我是否需要放弃这个想法并将渐变改为90度或者将它们全部忘掉？

谢谢！

Answer 1

经过多次努力，我向您展示了这个完整的CSS示例！完全可扩展！

Have a fiddle!

HTML

<div id="header" class="page-talk">
        <h1 class="page-title">talk</h1>
</div>

CSS

html, body {
    margin:0;
    padding:0;
}
div#header {
    height: 150px;
    width: 100%;
    background-image: -webkit-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: -moz-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: -o-linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-image: linear-gradient(45deg, #ff5071 0%, #5fd6e5 50%, #00ffab 100%);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 100;
}
h1.page-title {
    font-size: 6em;
    font-weight: 100;
    font-family:sans-serif;
    color: white;
    margin:0;
    margin-left:15px;
}
#header {
    position: relative;
}
#header:before {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    left: 0;
    border-bottom: 20px solid rgba(255, 255, 255, 1);
    border-right: 20px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#header:after {
    content:"";
    display: block;
    position: absolute;
    bottom: 0;
    width: 50%;
    right: 0;
    border-bottom: 20px solid rgba(255, 255, 255, 1);
    border-left: 20px solid transparent;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Answer 2

您可以尝试三角形的倒数 - 在div底部有2个白色的单独形状，留下渐变色的三角形。类似于给出这个问题的解决方案：

Achieve this background (see pic) with css