如何在CSS中获得不同类型的三角形？

Question

目前我正在使用border-bottom，border-top，border-left，border-right来处理不同类型的三角形。 到目前为止，我的背景颜色正常。

但我需要通过放置背景图像（不切割任何背景图像）来获得这种形状。 我试图通过使用边框但没有运气来做到这一点。

这方面的例子

Answer 1

您有两种方法可以获得此效果：

第一个仅在WebKit中受支持，您只需要一个div。 所有现代浏览器都支持第二种，但您的HTML不太干净，需要帮助div。

在下面的代码中， test是第一个示例， test2和inner2是第二个示例：

 .test { left: 0px; top: 0px; width: 400px; height: 300px; position: relative; border: solid 1px black; background-image: url(http://placekitten.com/440/330); display: inline-block; } .test:after { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-image: url(http://placekitten.com/300/400); background-size: cover; -webkit-clip-path: polygon(0px 0px, 100% 100%, 0px 100%); -moz-clip-path: polygon(0px 0px, 100% 100%, 0px 100%); clip-path: polygon(0px 0px, 100% 100%, 0px 100%); } .test2 { width: 400px; height: 300px; position: relative; border: solid 1px black; background-image: url(http://placekitten.com/440/330); overflow: hidden; display: inline-block; } .inner2 { position: absolute; width: 140%; height: 100%; left: 0px; top: 0px; -webkit-transform: rotate(37deg); -webkit-transform-origin: top left; transform: rotate(37deg); transform-origin: top left; overflow: hidden; } .inner2:after { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-image: url(http://placekitten.com/300/400); background-size: cover; -webkit-transform: rotate(-37deg); -webkit-transform-origin: top left; transform: rotate(-37deg); transform-origin: top left; } 

 <div class="test"></div> <div class="test2"><div class="inner2"></div></div> 

的jsfiddle

第一个示例使用裁剪来将图像切割成三角形（仅前面的图像，另一个保持矩形）。

第二个示例使用溢出隐藏和旋转来获得三角形。 然后，您需要相反的旋转才能使图像笔直。

在第一个例子中，您几乎可以做任何你想要的形状。 例如，

-webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%);

给你这个：

 .test { left: 0px; top: 0px; width: 400px; height: 300px; position: relative; border: solid 1px black; background-image: url(http://placekitten.com/440/330); display: inline-block; } .test:after { content: ""; position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; background-image: url(http://placekitten.com/300/400); background-size: cover; -webkit-clip-path: polygon(0px 0px, 66% 33%, 33% 66%, 100% 100%, 0px 100%); } 

 <div class="test"></div> 

的jsfiddle