Question

如何使用css获得此效果，只对图像底部的倾斜形状感兴趣（上图中带圆圈的黄色）任何非常感激的想法

Answer 1

有两种方式，一种是浏览器支持不佳，另一种是响应式设计不友好。

此处剪辑路径方法：

 #imageContainer img:hover{
 background:violet;
 -webkit-clip-path: polygon(12% 6%, 29% 14%, 71% 8%, 
 91% 29%, 44% 35%, 54%   64%, 10% 92%, 5% 43%);
 clip-path: polygon(12% 6%, 29% 14%, 71% 8%, 
 91% 29%, 84% 85%, 54% 64%, 10%   92%, 5% 43%);
 }
 #imageContainer img {
-webkit-clip-path: polygon(1% 3%, 3% 9%, 18% 21%, 54% 20%, 
 83% 63%, 66%      76%,          15% 83%, 25% 45%);
clip-path: polygon(17% 13%, 33% 9%, 
58% 21%, 84% 20%, 83% 63%, 66% 76%, 15% 83%, 25% 45%);
-webkit-transition: -webkit-clip-path .6s ease-out;
transition: -webkit-clip-path .6s ease-out;
position:absolute;
border-radius: 5px;
width: 100%;
height:270px;

}

请记住，元素位置必须是绝对的或固定的，否则剪辑路径不起作用。

还有＆＃34;面具＆＃34;现在，即使浏览器支持和问题更加糟糕，现在也只是远离它。

另一种方法是将变换应用于元素，但这不是一个好的解决方案。

链接到codepen，将鼠标悬停在容器元素上。

http://codepen.io/damianocel/pen/KdobyK

Answer 2

我能够使用http://bennettfeely.com/clippy/在Chrome中创建类似内容 - 但它在Firefox中无效。

-webkit-clip-path: polygon(0% 98%, 100% 74%, 99% 1%, 1% 0%);
clip-path: polygon(0% 98%, 100% 74%, 99% 1%, 1% 0%);

An image cropped into a polygon just using CSS

进一步阅读表明，这些类型的标签会出现各种跨浏览器问题，这些问题取决于您想要执行此操作的位置，您可能不需要。

或者，您可以创建第二个图像，该图像是透明背景上带有粉红色顶部的白色三角形，并将其覆盖在其他图像的顶部。如果你想要一个按钮，那么只需确保它的z分数大于你的三角形。请参阅代码段（使用黑色三角形使其更清晰）：

<div style="position:relative; left: 0; top: 0;">
  <img style="position:relative; top: 0; left: 0; z-index: 0;" src="https://en.wikipedia.org/static/images/project-logos/enwiki.png">
  <img style="position:absolute; top: 110px; left: 0px; width: 135px; height: 40px; z-index: 1;" src="https://upload.wikimedia.org/wikipedia/commons/1/14/Black_right_angled_triangle_1.png">
</div>

Answer 3

这不如剪辑蒙版那么完美，但具有更好的浏览器支持。您需要为变换添加前缀。

Codepen：http://codepen.io/anon/pen/jWxVBx

HTML：

<div class="container-skewed">
  <div class="bg-image"></div>
</div>

CSS：

.container-skewed {
  width: 100%;
  height: 500px;
  overflow: hidden;

  transform: skewY(-2deg);
  margin-top: -22px;
}

.bg-image {
  background-image: url('http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;

  transform: skewY(2deg) scale(1.09);
}

设置您希望容器的大小。然后将它倾斜一定程度 - 我选择2deg。隐藏任何溢出的东西。

以您想要的方式拍摄背景图像和大小/位置。如果使用cover属性，则需要将其缩放一点以填充额外的空间。

通过放置.container上的偏斜的反面来解开背景图像。

向上移动.container以摆脱左上角的空白区域。

CSS的最后几项是您应该使用的项目，具体取决于您的偏差。

-webkit-backface-visibility: hidden;使锯齿线在Chrome上消失。 reference this thread if you are having further issues with transforms / jagged edges / antialiasing

实现css倾斜图像形状 - 包括图像

3 个答案: