参见英文答案 >
Transparent arrow/triangle3
有可能在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不熟悉)？我可以使用只适用于现代浏览器的解决方案,因为这绝对只是“渐进增强”.
解决方法
这里是三角形从边界概念的扭曲.
>基本：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 Cut edge.
