使用clip-path：多边形赋予形状

Question

我一直在用这个剪辑路径做点什么，我差不多完成了，让我解释一下

看到这张图片

如你所见，有一个我想要的倾斜效果，到目前为止看起来很好，但效果应用于图像，我想要相同的效果，但在图像下面列表的第一项。

为了得到这样的东西

here is a JSBin我到目前为止所做的一切，以防你想品尝它

这里是我的代码

<div class="polygon">
  <img src="http://urbanetradio.com/wp-content/uploads/2014/10/banner.jpg">
</div>
<div ng-repeat="post in posts">
  <a ng-href="#/tabs/news/{{post.ID}}">
    <h2><span ng-bind-html="post.title"></span></h2>
    <p ng-bind-html="post.excerpt"></p>
    <p></i> {{:: post.date | date}}</p>
  </a>
</div>

和css

.polygon {
  clip-path: polygon(0 0, 100% 0, 100% 96%, 0 65%);
  z-index: 999;
}

而且，我该怎么做才能让它在所有浏览器中运行？

Answer 1

对不起，如果我不理解你想要的概念，我还要输入任何其他内容。

我认为你可以让第一个孩子没有顶边和负边距，让它更接近图像。

http://caniuse.com/#search=clip-path

IE

不支持剪辑路径