实现CSS倾斜图像形状--image包括

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; 

} 

记住元素的位置必须是绝对的或固定的，或夹路径是行不通的。

还有一个“掩码”属性，现在有更差的浏览器支持和问题，只是暂时离开。

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

链接到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-score大于你的三角形。见代码片断（用黑色三角形，使其更清晰）：

<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。隐藏溢出的东西。

把你的背景图片和大小/位置以你想要的方式。如果您使用封面属性，则需要稍微扩展以填充额外空间。

通过放置与.container相反的背景图像来消除背景图像。

将.container移开以摆脱左上角的空白。

CSS的最后一项是你应该玩的项目，具体取决于你的偏斜。

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