在div上切角,图像设置为100%高度和宽度

Question

在div上切角,图像设置为100%高度和宽度

Vin*_*nay 6 html css svg css-shapes clip-path

这基本上就是我想要实现的目标 - > 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%;
}

Run Code Online (Sandbox Code Playgroud)

<body>
  <div class="clip">
    <img src="http://lorempixel.com/600/600/" width="100%" height="100%" />
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

虽然我有一个解决方案,但是小提琴中的代码存在各种问题,如下所示:

它不适用于IE或Edge,因为不支持剪辑路径
剪辑路径不支持Firefox中的CSS形状,如果你需要使它在Firefox中工作,那么你需要提供内联svg
尝试提供内联svg,但它有自己的一系列问题,不能解决我的要求.无论容器的高度和宽度如何,我都需要切割尺寸保持不变.使用内嵌svg立即切割图像,它的尺寸随高度和宽度的变化而变化,即切割是响应的.我需要切割的静态尺寸.

除了上面的解决方案,我搜索了很多解决方案,这些解决方案可能有助于我创建带有切角的div,切割本身是透明的,因为我背面没有坚实的背景.

探索了其他解决方案

使用CSS3 Gradients示例

样本 - > http://jsfiddle.net/spdawson/3Tc8S/light/
如果您拥有占据该区域的完整高度和宽度的内容,例如在帖子开头提供的小提琴,则不起作用.

使用CSS边框

样本 - > http://jsfiddle.net/spdawson/HhZQe/light/
对我不起作用因为必须在其上进行切割的容器必须包含纯色背景颜色,而我的设计并非如此.

使用jQuery插件(http://jquery.malsup.com/corner/)

示例代码 - > http://jsfiddle.net/spdawson/nxnCD/light/
你需要有坚实的背景颜色,考虑到我的要求并非如此.我有一个图像作为背景.

一个有效的解决方案,但非常HACKY

样本 - > http://jsfiddle.net/26v7pfLb/
我现在正在使用这个解决方案用于具有固定高度和宽度的容器但我在我的应用程序中有一个页面,其中容器具有静态宽度但动态高度.在这种情况下,黑客将很难实现,并且个人使用此解决方案似乎非常奇怪.
我试图找到一些更优雅和干净的东西来实现CSS中的这种解决方案

任何指针都会有所帮助.

Answer 1

web*_*iki 4

您可以使用我在这个问题中描述的方法：Cut Corners using CSS using arotatecontaineroverflow:hidden;

对于您的示例（因为您想在元素内显示图像），您需要“取消旋转”内容，如下所示：

.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;}

Run Code Online (Sandbox Code Playgroud)

<div class="clip">
    <img src="http://lorempixel.com/600/600/" />
</div>

Run Code Online (Sandbox Code Playgroud)

该解决方案还需要使用边距或绝对定位进行定位。

归档时间：	10 年，2 月前
查看次数：	1118 次
最近记录：	10 年，2 月前