CSS倒置三角形图像叠加

Question

是否可以在CSS中制作类似的东西？我想要标题的图像,但我希望下一部分切出三角形,以便上面的图像显示在那里.

我知道如何制作一个带边框的实心CSS三角形(例如:http://www.dailycoding.com/Posts/purely_css_callouts.aspx),但在这种情况下我要么做相反的事情(拿一个"块"在蓝色部分之外",或者使三角形成为与其连接的图像完全对齐的图像.我在想,如果我能把一块"大块"拿出来,那可能会更容易

为了使它更复杂一点,我也将上面的图像设置为background-attachment: fixed和background-size: cover.因此,随着浏览器尺寸变大,图像会缩放.

如果我不能单独使用CSS并且需要图像,那么如果文本在页面上水平居中,我该如何制作正确的图像组合以使三角形与文本保持一致？我正在考虑这样的事情,两个长div的延伸到边缘,一个精确的宽度图像在中间,三角形透明:

_____________________________  ___ ______________________  _________________________
|    (really wide for margin)||   V (960px wide image)   || (really wide box again) |

但是它可以用CSS完成吗？或者是否有一个SVG解决方案(我不熟悉SVG)？我可以使用仅适用于现代浏览器的解决方案,因为这绝对只是"渐进式增强".

Answer 1

这是三角形 - 边界概念的转折.

• 基础:http://jsfiddle.net/nhqKb/
• 更详细:http://jsfiddle.net/nhqKb/3/

HTML

<div id="container">
    <div id="one"></div>
    <div id="two"></div>
</div>

CSS

#container{
    height: 300px;
    background-color: red;
    position: relative;
}

#one {
    position: absolute;
    width: 100px;
    left: 0;
    bottom: 0;
    border-bottom: 20px solid green;
    border-right: 20px solid transparent;
}

#two {
    position: absolute;
    left: 120px;
    bottom: 0;
    right: 0;
    border-bottom: 20px solid green;
    border-left: 20px solid transparent;
}

另一种选择:我用CSS转换(特别是偏斜)做了类似的事情.请参阅CSS(3)和HTML剪切边缘.