是否有可能在 CSS 中制作类似的东西？我想要一个标题图像，但我希望从下一部分中切出该三角形，以便上面的图像显示在那里。
我知道如何制作一个带有边框的实心 CSS 三角形（例如：http://www.dailycoding.com/Posts/purely_css_callouts.aspx http://www.dailycoding.com/Posts/purely_css_callouts.aspx），但在这种情况下，我要么需要做相反的事情（从蓝色部分中取出“块”），要么使三角形成为一个与它所连接的图像完全对齐的图像。我在想如果我能把“块”拿出来，那可能会更容易
为了让它变得更复杂一点，我还将上面的图像设置为background-attachment: fixed and background-size: cover。因此，图像会随着浏览器尺寸的增大而缩放。
如果我无法单独使用 CSS 来完成此操作并且需要图像，那么当文本在页面上水平居中时，如何才能正确组合图像以使三角形与文本保持一致？我在想这样的事情有两个长div延伸到边缘，中间有一张精确宽度的图像，三角形透明：
_____________________________ ___ ______________________ _________________________
| (really wide for margin)|| V (960px wide image) || (really wide box again) |
但只用 CSS 就能完成吗？或者是否有 SVG 解决方案（我对 SVG 不太熟悉）？我同意仅适用于现代浏览器的解决方案，因为这绝对只是“渐进增强”。
这是边界三角形概念的一个变形。
- Basic: http://jsfiddle.net/nhqKb/ http://jsfiddle.net/nhqKb/
- 更详细：http://jsfiddle.net/nhqKb/3/ 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 转换做了类似的事情（特别是倾斜）。看.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
