对角线楔形CSS – 边缘到边缘以浏览器为中心

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

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

任何人都有解决方案

我也认为我可能会遇到角度混乱的问题.
我可能需要诉诸使用图像.想要使用CSS.

**图像拼写错误. (无限期地不可避免)

解决方法

不需要 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;
}

注意：有些浏览器有时会使对角线出现过多的抗锯齿(如模糊或阴影).这个伎俩可以在现代浏览器上有点不可预知.