对角楔形CSS - 边缘到边缘在浏览器中心 [英] Diagonal Wedge Shaped CSS - Edge to Edge Centered in Browser

问题描述

我一直在尝试在CSS中创建这个形状。

I have been trying to make this shape in CSS.

理想情况下，它将跨越浏览器窗口的整个长度，并且可能扩展到视图外，以支持

Ideally it will span the entire length of the browser window and probably extend outside the field of view to support larger screens and also be centered so that the angle does not change.

任何人都有解决方案吗？

Anyone have any solutions?

我想我可能会跑成为严重的角度混淆的问题。
我可能需要诉诸使用一个图像。想要使用CSS。

Also I think I might run into a problem of the angle aliasing harshly. I might need to resort to using an image. Would like to use CSS though.

**图片拼写错误。 （无限不可避免）

** Image Spelling Error. (Indefinitely not Inevitably)

推荐答案

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

A solution that doesn't require CSS3 support:

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;
}

注意：您有时会过度抗锯齿对角线在某些浏览器（如夸大的模糊或dropshadow）。这个伎俩在现代浏览器上可能有点不可预测。

Note: You sometimes get excessive antialiasing of the diagonal in some browsers (like an exagerated blur or dropshadow). This trick can be a little unpredictable on modern browsers.

这篇关于对角楔形CSS - 边缘到边缘在浏览器中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！