在div上切角，图像设置为100％的高度和宽度 [英] Cut corner on div with image set to 100% height and width
问题描述
这基本上是我想要实现的 - > https://jsfiddle.net/tak1pyt7 / 1 /
.clip {width：500px;身高：500px; -webkit-clip-path：多边形（100％0,100％81％，82％100％，0 100％，0 0）; clip-path：多边形（100％0,100％81％，82％100％，0 100％，0 0）;} body {背景图像：径向梯度（圆圈，＃3F9CBA 0％，＃153346 100％ ）;身高：100％; width：100％;}
< body> < div class =clip> < img src =http://lorempixel.com/600/600/width =100％height =100％/> < / div>< / body>
$ b
一个解决方案，但在小提琴中的代码存在各种问题，如下所示：
除了上面的解决方案，我搜索了很多解决方案，可以帮助我创建带角落的div剪切和切割本身是透明的，因为我没有背后的坚实背景。
其他解决方案探索
使用CSS3 Gradients示例
- 示例 - > http://jsfiddle.net/spdawson/3Tc8S/light/
- 如果您的内容占据了该区域的全部高度和宽度，例如我在文章开头提供的小提琴，则无法使用。
使用CSS边界
-
不适用于我，因为Th必须在其上进行切割的容器必须包含固体背景颜色，这对于我的设计来说并非如此。
使用jQuery插件（ http://jquery.malsup.com/corner/ ）
-
您需要拥有坚实的背景颜色，考虑到我的要求，情况并非如此。相反，我有一个图像作为背景。
-
我现在正在使用此解决方案来获得固定高度和宽度的容器，但我在我的应用程序中有一个页面，容器有一个静态宽度但动态高度。在这种情况下，破解将非常难以实施，而且亲自使用该解决方案似乎很奇怪。
-
我试图找到更优雅和干净的东西来实现CSS中的这种解决方案。
/ ul> - It doesn't work in IE or Edge as clip path isn't supported
- Clip path doesn't support css shapes in firefox and if you need to make it work in firefox then you need to supply inline svg
- Tried supplying inline svg as well but it has it's own set of issues that doesn't solve my requirement. I need the cut dimensions to remain the same irrespective of the height and width of the container. With inline svg that cuts the image right now, it's dimension changes with change in height and width i.e. the cut is responsive. I need static dimensions of the cut.
- Sample --> http://jsfiddle.net/spdawson/3Tc8S/light/
- Doesn't work when you have the content which occupies full height and width of the area such as the fiddle i provided at the beginning of the post.
Sample --> http://jsfiddle.net/spdawson/HhZQe/light/
Doesn't work for me because The container on which the cut has to be made has to contain solid background color which is not the case for my design.
Sample code --> http://jsfiddle.net/spdawson/nxnCD/light/
You need to have solid background color which isn't the case considering my requirement. I have a image as a background instead.
Sample --> http://jsfiddle.net/26v7pfLb/
I am using this solution right now for containers that have fixed height and width but i have a page in my app where the containers have a static width but dynamic height. In that case the hack would be pretty difficult to implement and it seems very weird to use this solution personally.
I am trying to find something more elegant and clean to implement such a kind of solution in CSS
$ b >
任何指针都会有帮助。
您可以使用我在此问题中描述的方法：使用CSS切割角落使用带有 overflow：hidden; 的旋转容器
对于你的例子（因为你想在元素中显示图像），你需要像这样旋转内容：
.clip {margin：-150px 0 0 -150px;显示：inline-block; transform：旋转（-45deg）; overflow：hidden;} img {margin：150px 150px 0 150px;显示：块; transform：rotate（45deg）;} body {background：url（http://lorempixel.com/output/nature-qg-640-480-7.jpg）; background-size：cover;}< div class =clip>
此解决方案还需要定位边距或绝对定位。
This is basically what i want to achieve --> https://jsfiddle.net/tak1pyt7/1/
.clip {
width: 500px;
height: 500px;
-webkit-clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 81%, 82% 100%, 0 100%, 0 0);
}
body {
background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
height: 100%;
width: 100%;
}
<body>
<div class="clip">
<img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
</div>
</body>
Although i have a solution but there are various issues with the code in the fiddle as follows :
Other than above solution i searched a whole lot of solutions that might help me create div's with corners cut and the cut is transparent itself because i don't have a solid background at the back.
Other solutions explored
Using CSS3 Gradients sample
Using CSS Borders
Using jQuery plugin (http://jquery.malsup.com/corner/)
A Solution that WORKS but is very HACKY
Any pointers would be helpful.
You can use the approach I described in this question : Cut Corners using CSS using a rotate container with overflow:hidden;
For your example (as you want to display an image inside the element) you need to "unrotate" the content like this :
.clip {
margin: -150px 0 0 -150px;
display: inline-block;
transform: rotate(-45deg);
overflow: hidden;
}
img {
margin: 150px 150px 0 150px;
display: block;
transform: rotate(45deg);
}
body{background:url(http://lorempixel.com/output/nature-q-g-640-480-7.jpg);background-size:cover;}
<div class="clip">
<img src="http://lorempixel.com/600/600/" />
</div>
This solution also requires positioning either with margins or with absolute positioning.
这篇关于在div上切角，图像设置为100％的高度和宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
