如何实现这种形状与角度切口在底部和CSS中的图像背景？ [英] How to accomplish this shape with angled cuts at the bottom and an image background in CSS?
问题描述
我有
dippos的回答和misterManSam的评论中的演示都很好，如果页面背景是纯色（然后可以用作边框的颜色或在渐变内）。当页面背景是图片（或）渐变，并且它们应该通过形状的切口部分显示时，它们会遇到问题。
对于这种情况，推荐使用SVG而不是CSS，因为它是如此复杂，创建它与CSS，它实际上是不值得的努力。虽然你已经要求CSS，我会在这里详细介绍这些SVG方法，以防万一你想使用它们（或至少有些未来的读者可能会觉得很有帮助）。
使用SVG：
使用SVG，我们可以创建路径图像（或）使用SVG掩模创建形状。 （ ：由于IE中缺少支持，使用SVG的CSS clip-path 仍然是无效的。 ）
下面的代码段使用SVG path 元素创建形状，然后用图像填充。 >
svg {height：200px; width：100％;} path {fill：url（#image）;} / *只是演示* / path：hover {cursor：pointer;} body {min-height：100vh; background-image：radial-gradient（circle，＃3F9CBA 0％，＃153346 100％）;}
< svg viewBox ='0 0 1024 200'preserveAspectRatio ='none'> < defs> < pattern id ='image'height ='200'width ='1024'patternUnits ='userSpaceOnUse'> < image xlink：href ='http：//lorempixel.com/1024/200/nature/3'height ='200'width ='1024'/> < / pattern> < / defs> < path d ='M0,0 1024,0 1024,150 716.8,200 0,150z'/>< / svg>
以下代码段使用SVG掩码。使用路径与图像填充和蒙版之间的区别是悬停区域。使用路径，悬停效果仅限于形状边界，而使用遮罩，图像仍是一个矩形（或正方形），因此即使在外部也会触发悬停效果。 / p>
svg {height：200px; width：100％;} image {mask：url（#masker）;} / *只是演示* / image：hover {cursor：pointer;} body {min-height：100vh; background-image：radial-gradient（circle，＃3F9CBA 0％，＃153346 100％）;}
< svg viewBox ='0 0 1024 200'preserveAspectRatio ='none'> < defs> < mask id ='masker'x ='0'y ='0'width ='1024'height ='200'> < polygon points ='0,0 1024,0 1024,200 0,200z'fill =＃fff/> < path d ='M0,150 716.8,200 1024,150 1024,200 0,200z'fill =＃000/> < / mask> < / defs> < image xlink：href ='http：//lorempixel.com/1024/200/nature/3'height ='200'width ='1024'/>< / svg>
下面的选项是我们最好的打赌纯CSS，但不幸的是它有较差的浏览器支持。它使用CSS linear-gradient 作为掩码图像来隐藏不需要的部分。此方法目前只能在仅在Webkit支持的浏览器中工作，因此不允许。
.shape {height：200px; width：100％; background-image：url（http://lorempixel.com/1200/200/nature/3）; -webkit-mask-image：线性梯度（至右上，透明49.5％，白色50.5％），线性梯度（至左上，透明49.5％，白色50.5％），线性梯度掩蔽图像：线性梯度（到右上，透明49.5％，白色50.5％），线性梯度（到左上，透明49.5％，白色50.5％），线性梯度-webkit-mask-size：70.5％30％，30％30％，100％70％; -webkit-mask-position：bottom left，bottom right，top left; -webkit-mask-repeat：no-repeat;} body {min-height：100vh; background-image：radial-gradient（circle，＃3F9CBA 0％，＃153346 100％）;}
< div class ='shape'>< / div>
其他尝试产生一个透明切口遇到问题，如果形状必须响应。例如，下面的代码片段使用非常复杂的变换，定位等来实现这种形状，但是它不响应（以全页模式查看）。我不会推荐这种方法，即使形状是响应（由于涉及的复杂性），但缺乏响应意味着这是一个不去。
.shape {position：relative; height：200px; width：100％; overflow：hidden;}。shape-left，.shape-right，.shape img {position：absolute; height：100％;}。shape-left {width：75％; transform：skewY（5deg）; overflow：hidden;}。shape-left img {top：-7％; bottom：0px;宽度：133.3％; transform：skewY（-5deg）;}。shape-left，.shape-left img {transform-origin：bottom right; backface-visibility：hidden;}。shape-right {right：0％;宽度：25％; transform：skewY（-10deg）; overflow：hidden;}。shape-right img {top：-13.5％;左：-300％;宽度：400％; transform：skewY（10deg）;}。shape-right {transform-origin：bottom left; backface-visibility：hidden;} / *仅供演示* /。reference {height：200px; width：100％;}。reference img {height：100％; width：100％;} * {box-sizing：border-box;} body {min-height：100vh; background-image：radial-gradient（circle，＃3F9CBA 0％，＃153346 100％）;}
< div class ='shape'> < div class ='shape-left'> < img src ='http：//lorempixel.com/800/200/nature/3'/> < / div> < div class ='shape-right'> < img src ='http：//lorempixel.com/800/200/nature/3'/> < / div>< / div>< hr>< div class ='reference'> < img src ='http：//lorempixel.com/800/200/nature/3'/>< / div>
div>
注意：可能是manSam在m评论中引用的项目，但我觉得这里的需求有点不同，即使它们都涉及创建不寻常的边界。
I have read up on various methods and played with the Clippy tool, the problem is the browser support just isn't there yet. What would be the best method for accomplishing the look of the image below with CSS? I am trying to add a shape as bottom-border as you can see in the image below right after the blue background image. Is there a way I can do this that most recent major browsers support through CSS?
What I've tried (doesn't seem to work in Chrome and others):
.element {
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 86%, 75% 100%, 0 85%, 0 0);
}
The desired result would look something like:
Both dippas' answer and the demo in misterManSam's comment are good but they would work only if the page background is a solid color (which can then be used as border's color or within the gradient). They would run into problems when the page's background is either an image (or) a gradient and they should show through the cutout portion of the shape.
For such cases I would recommend using SVG instead of CSS because it is so complex to create it with CSS that it is not actually worth the effort. Though you've asked for CSS, I will detail these SVG methods here just in case you want to use them (or atleast some future readers might find it helpful).
With SVG:
With SVG we can either create a path and fill it with the image (or) use a SVG mask for creating the shape. (Note: CSS clip-path using SVG is still a no-go due to lack of support in IE.)
Below snippet uses SVG path element to create the shape and then fill it with the image.
svg {
height: 200px;
width: 100%;
}
path {
fill: url(#image);
}
/* Just for demo */
path:hover{
cursor: pointer;
}
body {
min-height: 100vh;
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox='0 0 1024 200' preserveAspectRatio='none'>
<defs>
<pattern id='image' height='200' width='1024' patternUnits='userSpaceOnUse'>
<image xlink:href='http://lorempixel.com/1024/200/nature/3' height='200' width='1024' />
</pattern>
</defs>
<path d='M0,0 1024,0 1024,150 716.8,200 0,150z' />
</svg>
The following snippet uses SVG mask. The difference between using a path with an image fill and a mask is the hover area. With a path the hover effects are restricted to the shape boundary whereas with a mask, the image is still a rectangle (or square) and so hover effects are triggered even outside.
svg {
height: 200px;
width: 100%;
}
image {
mask: url(#masker);
}
/* Just for demo */
image:hover{
cursor: pointer;
}
body {
min-height: 100vh;
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<svg viewBox='0 0 1024 200' preserveAspectRatio='none'>
<defs>
<mask id='masker' x='0' y='0' width='1024' height='200'>
<polygon points='0,0 1024,0 1024,200 0,200z' fill="#fff" />
<path d='M0,150 716.8,200 1024,150 1024,200 0,200z' fill="#000" />
</mask>
</defs>
<image xlink:href='http://lorempixel.com/1024/200/nature/3' height='200' width='1024' />
</svg>
With CSS:
The below option is our best bet with pure CSS but unfortunately it has poor browser support. It uses CSS linear-gradient as mask images to hide the portions that are not required. This method works only in Webkit powered browsers for now and so is a no-go.
.shape {
height: 200px;
width: 100%;
background-image: url(http://lorempixel.com/1200/200/nature/3);
-webkit-mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
mask-image: linear-gradient(to top right, transparent 49.5%, white 50.5%), linear-gradient(to top left, transparent 49.5%, white 50.5%), linear-gradient(white, white);
-webkit-mask-size: 70.5% 30%, 30% 30%, 100% 70%;
-webkit-mask-position: bottom left, bottom right, top left;
-webkit-mask-repeat: no-repeat;
}
body {
min-height: 100vh;
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class='shape'></div>
Other attempts to produce a transparent cut run into problems if the shape has to be responsive. For example, the below snippet uses very complex transformations, positioning etc to achieve this shape but it is not responsive (view in full page mode). I wouldn't have recommended this method even if the shape was responsive (due to complexities involved) but the lack of responsiveness means this is a no-go.
.shape {
position: relative;
height: 200px;
width: 100%;
overflow: hidden;
}
.shape-left,
.shape-right,
.shape img {
position: absolute;
height: 100%;
}
.shape-left {
width: 75%;
transform: skewY(5deg);
overflow: hidden;
}
.shape-left img {
top: -7%;
bottom: 0px;
width: 133.3%;
transform: skewY(-5deg);
}
.shape-left,
.shape-left img {
transform-origin: bottom right;
backface-visibility: hidden;
}
.shape-right {
right: 0%;
width: 25%;
transform: skewY(-10deg);
overflow: hidden;
}
.shape-right img {
top: -13.5%;
left: -300%;
width: 400%;
transform: skewY(10deg);
}
.shape-right {
transform-origin: bottom left;
backface-visibility: hidden;
}
/* just for demo */
.reference {
height: 200px;
width: 100%;
}
.reference img {
height: 100%;
width: 100%;
}
* {
box-sizing: border-box;
}
body {
min-height: 100vh;
background-image:radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
<div class='shape'>
<div class='shape-left'>
<img src='http://lorempixel.com/800/200/nature/3' />
</div>
<div class='shape-right'>
<img src='http://lorempixel.com/800/200/nature/3' />
</div>
</div>
<hr>
<div class='reference'>
<img src='http://lorempixel.com/800/200/nature/3' />
</div>
Note: This may have been the item that misterManSam was referring to in comments but I feel the needs are a bit different here even though both involve creating unusual borders.
这篇关于如何实现这种形状与角度切口在底部和CSS中的图像背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
