我一直试图在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;
}
注意：有些浏览器有时会使对角线出现过多的抗锯齿(如模糊或阴影).这个伎俩可以在现代浏览器上有点不可预知.
