11

在此处输入图像描述

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

我知道如何制作一个带边框的实心 CSS 三角形（例如：http ://www.dailycoding.com/Posts/purely_css_callouts.aspx ），但在这种情况下，我需要做相反的事情（取一个“块”从蓝色部分出来），或者使三角形成为一个图像，它以某种方式与它所连接的图像完全对齐。我在想如果我能拿出一个“块”，那可能会更容易

为了让它更复杂一点，我还将上面的图像设置为background-attachment: fixedand background-size: cover。因此，图像会随着浏览器尺寸的增大而缩放。

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

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

但是可以只用 CSS 来完成吗？或者是否有 SVG 解决方案（我对 SVG 不太熟悉）？我对只适用于现代浏览器的解决方案没有意见，因为这绝对只是“渐进式增强”。

4

3 回答 3

9

这是三角形边界概念的一个转折点。

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 切边。

于 2013-08-22T07:29:24.973 回答
3

::before您完全可以使用and来完成它而无需太多额外的标记::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

于 2013-08-22T18:55:24.470 回答
0

我以不同的方式解决了这个问题。不完全是操作人员想要的，但看起来不错，可能会帮助其他人。

我已经使用z-index并border-radius实现了这个效果

演示

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;
}
于 2013-08-22T07:54:56.463 回答