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

Question

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

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

此示例

Answer 1

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

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle

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

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

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

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

给你这个：

＆＃13;

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

JSFiddle