参见英文答案 >
Transparent arrow/triangle3
有可能在CSS中做这样的事情吗？我想要一个头像的图像,但我想要这个三角形切出下一部分,所以上面的图像显示在那里.
我知道如何用边框制作一个坚实的CSS三角形(像这样的例子：http://www.dailycoding.com/Posts/purely_css_callouts.aspx),但在这种情况下,我需要做相反的处理(从蓝色部分中取出一个“块”),或者使三角形成为图像以某种方式与其连接的图像完全一致.我在想,如果我可以采取一个“大块”,这可能会更容易
为了使它更复杂一点,我也有上面的图像设置为background-attachment：fixed和background-size：cover.因此,随着浏览器大小的增大,图像会缩小.
如果我不能单独使用CSS并且需要一个图像,如果文本在页面上水平放置,如何使图像的正确组合保持三角形与文本相符？我正在考虑这样的两个长div的扩展到边缘,一个确切的宽度图像在中间与三角形透明：
@H_301_10@_____________________________ ___ ______________________ _________________________ | (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
@H_301_10@<div id="container"> <div id="one"></div> <div id="two"></div> </div>CSS
@H_301_10@#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.
