CSS倒三角图像叠加 [英] CSS Inverted Triangle image overlay

问题描述

>

可能在CSS中做类似的东西？我想要一个图像的头，但我想要的三角形切出下一个部分，所以上面的图像显示那里。

Is it possible to make something like that in CSS? I want an image for the header, but I want that triangle cut out of the next section so the image above shows there.

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

I know how to make a solid CSS triangle with borders (something like this for example: http://www.dailycoding.com/Posts/purely_css_callouts.aspx), but in this case I either need to do the opposite (take a "chunk" out of the blue part), or make the triangle an image that somehow lines up exactly with the image it is connected to. I'm thinking if I can take a "chunk" out, that might be easier

为了使它更复杂一点，我也有上面的图像设置为 background-attachment：fixed 和 background-size：cover 。

To make it a little more complicated, I also have the image above set to background-attachment: fixed and background-size: cover. So the image scales as the browser size is made larger.

如果我不能单独使用CSS，需要一个图像，我该如何做出正确的组合图像以保持三角形与文本一致（如果文本在页面上水平居中）？我想这样两个长的 div ，延伸到边缘，一个精确的宽度图像在中间与三角形透明：

If I can't do it with CSS alone and need an image, how can I make the right combinations of images to keep the triangle in line with the text if the text is centered horizontally on the page? I'm thinking something like this with two long div's that extend into the margins, and one exact width image in the middle with the triangle transparent:

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

但是可以用CSS完成吗？或者是可能有一个SVG解决方案（我不熟悉SVG）？我可以使用只在现代浏览器中使用的解决方案，因为这绝对只是渐进增强。

But can it be done with just CSS? Or is there perhaps an SVG solution (I'm not as familiar with SVG)? I'm okay with a solution that only works in modern browsers as this is definitely just "progressive enhancement".

推荐答案

• 基本： http://jsfiddle.net/nhqKb/


• 详细： http://jsfiddle.net/nhqKb/3/

• Basic: http://jsfiddle.net/nhqKb/
• More Detailed: 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剪切边。

An alternative: I've done something similar with CSS transforms (specifically, skew). See CSS (3) & HTML Cut edge.

这篇关于CSS倒三角图像叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！