How to get Different type triangle shapes in css?

Question

Presently I am working on different types of triangle shapes by using border-bottom, border-top, border-left, border-right. Up to this I am getting OK with background color.

But I need to get this shapes by placing background images(without cutting any background images). I tried to do this by using border but no luck.

Example for this

Answer 1

You have 2 ways to get this effect:

The first one is supported only in WebKit, and you will need only one div. The second one is supported in all modern browsers, but your HTML is less clean, and needs a helper div.

In the code below, test is the first example and test2 and inner2 the second example:

.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

The first example uses clipping to get the image cut in triangle shape (only the front image, the other remains rectangular).

The second example uses overflow hidden and a rotation to get the triangular shape. Then, you need the opposite rotation to get the image straight.

In the first example, you can do almost whatever shape you want. For instance,

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

gives you this:

.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