html - 如何在CSS中获得不同类型的三 Angular 形？

Question

目前，我正在使用 border-bottom、border-top、border-left、border-right 处理不同类型的三 Angular 形。到此为止，我对背景颜色的接受程度还不错。

但我需要通过放置背景图像(不剪切任何背景图像)来获得此形状。我尝试通过使用边框来做到这一点，但没有成功。

这个例子

Answer 1

您有 2 种方法获得此效果:

第一个仅在 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

第一个例子使用裁剪将图像切割成三 Angular 形(只有前面的图像，其他保持矩形)。

第二个示例使用溢出隐藏和旋转来获得三 Angular 形。然后，您需要进行相反的旋转以使图像变直。

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

-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