对角线楔形CSS - 边缘到边缘在浏览器中居中

Question

我一直试图在CSS中创建这个形状.

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

有人有任何解决方案？

另外我想我可能会遇到角度混淆的问题.我可能需要使用图像.想使用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;
}

注意:在某些浏览器中,您有时会对对角线进行过多的抗锯齿处理(如夸张的模糊或阴影).在现代浏览器上,这个技巧可能有点不可预测.