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