CSS图像与凹形切出？ [英] CSS image with concave shape cut out?

问题描述

>

可能只使用CSS在这个图像上创建底部曲线？

Is it possible to create the bottom curve on this image using only CSS?

我见过并尝试了许多无数的fiddles，显示如何使用 border -radius 但是问题是角不会导致尖锐的边缘。

I've seen and tried many of the countless fiddles showing how to use border-radius but the problem is that the corners never result in a sharp edge.

任何帮助将非常感激！

推荐答案

不使用svg的解决方案非常棘手，想法是你需要一些包含你的实际图像的包装，这个包装应该有一个非常大的尺寸在这个例子中，我使用大小 945 x 500 ），以便它可以呈现一个大曲线。我们需要为此容器设置 overflow：hidden ，以隐藏内部图像的其他溢出部分。这个技巧将像剪辑 功能，可以通过曲线切断图像。

The solution without using svg is very tricky, the idea is you need some wrapper containing your actual image, this wrapper should have a very large size (in this example, I used the size 945 x 500) so that it can render a large curve. We need to set the overflow:hidden for this container to hide other overflow part of the inner image. This trick will function like a clipper which can cut off the image by the curve.

另外请注意，在这个例子中我们将使用CSS3的一些相当新的特性（没有它们我认为我们不能做到最好），那就是 clip 属性，实际上我们并不真正需要这个（因为容器的背景是透明的，将通过它看到）。对于 clip 工作，我们必须为容器应用 position：absolute ，这意味着我们必须使用绝对位置为容器。因此，要定位容器，必须更改左和 top 属性。实际上，实际的图像和容器之间有偏移，所以会有一个问题，例如水平偏移 200px ，但是当你设置 left 这个容器的位置为 100px ，你想要的就是 left 。如果我们不做任何事，通常内部图像的 left 将是 100 + 200 = 300px 。所以要处理这个，我们必须对容器应用一些 translate 转换（横向翻译 -200px 所以最后计算的值将是 300px - 200px = 100px 这是我们想要的结果这里是代码的细节：

Also note that we will use some fairly new feature of CSS3 in this example (without them I don't think we can do at best), that is the clip property, in fact we don't really need this (because the background of the container is transparent which will be seen through). For clip to work, we have to apply position:absolute for the container, that means we have to use absolute position for the container. So to position the container, you have to change the left and top property. In fact there are offsets between the actual image and the container, so there will be a problem, for example, the horizontal offset is 200px, but when you set the left position for the container as 100px, you want that is exactly the left of the inner image. If we don't do anything, normally the left of the inner image will be 100 + 200 = 300px. So to deal with this, we have to apply some translate transform to the container (translate it horizontally about -200px, so the final computed value for the left will be 300px - 200px = 100px which is the result we want. Here are the code details:

HTML ：

<div id='clipper'>
   <div></div>
</div>

CSS ：：

CSS:

#clipper > div {    
  width:400px;
  height:200px;
  background:url(http://placekitten.com/400/200);                
  position:absolute;
  left:calc(50% - 300px);
  top: calc(100% - 200px);
  -webkit-filter: blur(1px);
}
#clipper {     
  border-bottom-left-radius:1800px 500px;
  border-bottom-right-radius:1800px 800px;
  overflow:hidden;
  height:500px;
  width: 945px;    
  position:absolute;
  clip: rect(300px, 573px, 500px,173px);
  -webkit-transform: translate(-173px, -300px);    
  left: 100px;
  top:50px;    
}

工作演示

注意：示例中使用的模糊效果仅用于演示目的，它只工作在基于webkit的浏览器，我知道很难有一个跨浏览器的解决方案，我想这是你自己的部分。最后一件事我要提到的是，我已经提到这是非常棘手的，它需要试错法 ，如果你想改变图像的大小，您可能必须使用试错法 重做步骤才能达到所需的效果。这个答案主要显示了实现效果的原理和机制。

Working Demo.

NOTE: The blur effect I used in the example is just for demonstrative purpose, it works only on webkit-based browsers, I know it's hard to have a cross-browser solution and I suppose it's your own part. The last thing I want to note is I've already mentioned that this is very tricky, it requires trial and error, if you want to change the size of the image, you may have to redo the steps with trial and error to achieve the effect you want. This answer just mainly shows the principle and mechanism to achieve the effect.

问题：看起来还是有一个讨厌的问题， container clipper 被剪切和透明，但它仍然能够使水平滚动条出现。我认为这个问题是相当恼人。我们可以设置 body {overflow-x：hidden;} 但它取决于其他内容...我希望有人会找到一个很好的解决方案，这个问题，直接发布或作为注释中的链接引用。非常感谢。

Issue: Looks like there is still a nasty issue, although the large container clipper is clipped and transparent but it is still able to make the horizontal scrollbar appear. I think this issue is fairly annoying. We can set the body { overflow-x:hidden;} but it depends on other contents... I hope someone will find a nice solution for this issue and post directly or as link reference in the comment. I would be appreciated that.

更新：刚刚找到了上面的问题的解决方案，我们需要包装另一个大小相等的容器到内部映像，为这个最外面的容器设置 overflow：hidden 。当然，为了定位内部图像，我们只需要改变这个最外面容器的 left 和 top code> clipper ）。这是完整演示。

Update: Just found the solution for the issue above, we need to wrap another container with the size being equal to the inner image, set overflow:hidden for this outermost container. Of course to position the inner image, we just change the left and top of this outermost container (instead of the clipper as before). Here is the Complete Demo.

这篇关于CSS图像与凹形切出？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！