Question

enter image description here

是否可以在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 Cut edge。

Answer 2

使用::before和::after，您可以在没有太多额外标记的情况下完成此操作。你只需要容器上的overflow: hidden。

鉴于

<div class="hero">
  <img src="http://farm3.staticflickr.com/2431/3875936992_348d6dd86b_b.jpg" alt=""/>
</div>

CSS将是

.hero {
    position: relative;
    overflow: hidden;
}
.hero img {
    display: block;
    width: 960px;
    height: auto;
}
.hero::before {
    content: "\00A0";
    display: block;
    border: 960px solid #fff; /* the width of the image */
    border-top-width: 0;
    border-bottom-width: 0;
    height: 30px; /* 1/2 the triangle width */
    width: 60px; /* the triangle width */
    position: absolute;
    bottom: 0;
    left: -630px; /* the left offset - the image width */
}
.hero::after {
    content: "\00A0";
    display: block;
    border: 30px solid #fff; /* 1/2 the triangle width */
    border-top: 30px solid transparent; /* 1/2 the triangle width */
    border-bottom-width: 0;
    height: 0;
    width: 0;
    position: absolute;
    bottom: 0;
    left: 330px; /* the left offset */
}

实例：http://codepen.io/aarongustafson/full/nutDB

Answer 3

我以不同的方式对此进行了研究。不完全是op想要的，但看起来很好，可能会帮助其他人。

我使用 z-index 和 border-radius 来实现此效果

的 DEMO 的

HTML

<div> <img src="http://lorempixel.com/500/200/sports/" class="lowerpic"/> <div class="leftupperdiv"></div> <div class="rightupperdiv"></div> </div>

CSS

.lowerpic { z-index:-1; position:absolute; } .leftupperdiv { z-index:1; position:absolute; margin-top:150px; width:100px; height:50px; border-radius: 0px 30px 0px 0px; background-color: blue; } .rightupperdiv { z-index:1; position:absolute; margin-top:150px; margin-left:100px; width:400px; height:50px; border-radius: 30px 0px 0px 0px; background-color: blue; }

CSS倒置三角形图像叠加

3 个答案: