三角底部CSS与背景

Question

*我知道它与此How to create a polygon shape div重复，但我不知道如何在底部修复它。我真的尝试了一切，我不明白它是如何完成的。请有人帮我这个吗？ *

我正在切割我收到的设计。但现在我遇到了一个问题。

我想以三角形切割滑块的背景（见图）。

如何在CSS3中执行此操作？

注意：必须有响应。

Answer 1

我认为clip-path在这种情况下最好。见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%);