How to get Different type triangle shapes in css?

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

Answers


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>

Need Your Help

block within a block not sure what to do

ios objective-c

I am making a mess and am trying to figure out a proficient way to handle this but am getting stuck. My problem right now is that I have code executing before I want them to be and it has to do wit...

To get IP Address from interface name in Windows

c++ winapi networking porting windows-networking

I like to know, winapi from which i can get ipaddress using interface name. The Linux version of which is as below.