css - 对 Angular 楔形 CSS - 在浏览器中边到边居中

Question

我一直在尝试用 CSS 制作这个形状。

理想情况下，它将跨越浏览器窗口的整个长度，并可能延伸到视野之外以支持更大的屏幕，并且还居中以便 Angular 不会改变。

谁有解决办法？

此外，我认为我可能会遇到严重的 Angular 混叠问题。我可能需要求助于使用图像。不过我想使用 CSS。

** 图片拼写错误。 (无限期不是不可避免地)

Answer 1

不需要CSS3支持的解决方案:

jsfiddle 演示

HTML

<div class="shape">
    <div class="top"></div>
    <div class="bottom"></div>
</div>

CSS

.shape {
    width:400px;
    margin:0 auto;
}
.top {
    height:0;
    border-width:0 0 150px 400px;
    border-style:solid;
    border-color:transparent #d71f55 #d71f55 transparent;
}
.bottom {
    height: 50px;
    background-color:#d71f55;
}

/* Support transparent border colors in IE6. */
* html .top {
    filter:chroma(color=#123456);
    border-top-color:#123456;
    border-left-color:#123456;
}

注意:在某些浏览器中有时会出现对 Angular 线的过度抗锯齿(如夸张的模糊或阴影)。这个技巧在现代浏览器上可能有点不可预测。