如何在css中获得不同类型的三角形形状？答案

【问题标题】：How to get Different type triangle shapes in css?如何在css中获得不同类型的三角形形状？
【发布时间】：2017-02-03 01:34:41
【问题描述】：

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

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

这个例子

【问题讨论】：

标签： html css css-shapes

【解决方案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%);
}

&lt;div class="test"&gt;&lt;/div&gt;

JSFiddle

【讨论】：