带背景的三角形底部 CSS [英] Triangle bottom CSS with background

问题描述

*我知道它是从这个复制的

解决方案

我认为 clip-path 最适合这种情况.参见 fiddle

background-image: url('image.jpg');-webkit-clip-path: 多边形(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);剪辑路径:多边形(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%)；

*I know it's duplicated from this How to create a polygon shape div , but I don't know how to fix it on the bottom. I really tried everything, and I don't understand how it's done. Can someone help me with this please? *

I am slicing a design I received. But now I walk into a problem.

I want to cut the background of my slider in a triangle shape ( see image ).

How can I do this in CSS3?

NOTE: It has to be responsive.

解决方案

I think clip-path would be best in this situation. See fiddle

background-image: url('image.jpg');
-webkit-clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);
clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80%);

这篇关于带背景的三角形底部 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！