How can i collect 4 small triangle shapes to make a big triangle?

Question

I want to make a image background triangle that made by gathering 4small triangles,like this image

enter image description here

How can i make this collection of triangle image background shapes?!

.block {
    width: 0;
    height: 0;
    border: solid 20px;    
    float: left;
}
.clear {
    clear: both;
}
.top {
    margin-left: 38px;
}
.top .left {    
    border-color: transparent green green transparent;
}
.top .right {    
    border-color: transparent transparent green green;
}
.bottom .left1 {    
    border-color: transparent red red transparent;
}
.bottom .mid1 {    
    border-color: blue blue red red;
}
.bottom .mid2 {    
    border-color: blue purple purple blue;
}
.bottom .right1 {    
    border-color: transparent transparent purple purple;
}

<div class="top">
    <div class="block left"></div>
    <div class="block right"></div>
    <div class="clear"></div>
</div>
<div class="bottom">
    <div class="block left1"></div>
    <div class="block mid1"></div>
    <div class="block mid2"></div>
    <div class="block right1"></div>
</div>

enter link description here

You could always just make an image using your favorite image editor. Otherwise, the explanation you'd need to satisfy your question may be longer than you'd normally get on this site. — Josh Burgess, Jun 10 '15 at 15:16
Indeed, you'd probably need to clip each image (which is not well supported in CSS) then position each image/div individually. The question (IMO) is too broad for SO. — Paulie_D, Jun 10 '15 at 15:19
Totally doable but not well supported. What browsers are you supporting? Are the images dynamic, user supplied, or will this be a static image on a site? Need to be more specific to what you need. — Sean Stopnik, Jun 10 '15 at 15:23
@SeanStopnik actually i want to add a ability to it that my site users can change the image background of each small triangles by select from a static menu(like a puzzle game). How can i make this?! — hghayour, Jun 10 '15 at 15:49
Yes, this is definintely one where you should be using SVG (or Canvas, but SVG is probably the better choice). Don't bother trying to force it with CSS -- SVG will give you better results, and also has better browser support than the CSS features you'd need to achieve this. — Simba, Jun 10 '15 at 15:54
@Simba thanks Simba,but i haven't any information about SVG. Can you suggest me dependent code?! — hghayour, Jun 10 '15 at 15:59
@AlvaroMontoro It's possible but i haven't any information about SVG. Can you suggest me dependent code?! — hghayour, Jun 10 '15 at 16:01

score 5 · Accepted Answer · edited May 23 '17 at 12:19

As I mentioned in the comments, this could be a case in which SVG/canvas is a better solution. I am not an expert at them, but creating a simple pattern like the one you want is simple (I used the background solution from this question):

<svg width="300" height="300">
    <defs>
        <pattern id="img1" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/people/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img2" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/animals/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img3" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/abstract/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img4" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/sports/" x="0" y="0" width="200" height="200"/>
        </pattern>
    </defs>
    <path d="M150,0 225,150 75,150" fill="url(#img1)" />
    <path d="M0,300 75,150 150,300" fill="url(#img2)" />
    <path d="M75,150 225,150 150,300" fill="url(#img3)" />
    <path d="M150,300 300,300 225,150" fill="url(#img4)" />
</svg>

Edit: as requested in the comments below, added some code to show how to manipulate the elements (click on two triangles and their images will swap):

var step = 0;
var $prev;

$("path").on("click", function() {
    switch (step) {
        // if it's the first step: save the current element for later
        case 0:
            step = 1;
            $prev = $(this);
            break;
        // if it's the second step: swap images and start again
        case 1:
            step = 0;
            var aux = $prev.attr("fill");
            $prev.attr("fill", $(this).attr("fill"));
            $(this).attr("fill", aux);
            break;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg width="300" height="300">
    <defs>
        <pattern id="img1" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/people/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img2" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/animals/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img3" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/abstract/" x="0" y="0" width="200" height="200" />
        </pattern>
        <pattern id="img4" width="100%" height="100%">
            <image xlink:href="http://lorempixel.com/200/200/sports/" x="0" y="0" width="200" height="200"/>
        </pattern>
    </defs>
    <path id="path1" stroke="black" d="M150,0 225,150 75,150 150,0" fill="url(#img1)" />
    <path id="path2" stroke="black" d="M0,300 75,150 150,300 0,300" fill="url(#img2)" />
    <path id="path3" stroke="black" d="M75,150 225,150 150,300 75,150" fill="url(#img3)" />
    <path id="path4" stroke="black" d="M150,300 300,300 225,150 150,300" fill="url(#img4)" />
</svg>

You can also see it on this JSFiddle: http://jsfiddle.net/4x7sh6bj/1/

Very good! ;) Just a question: actually i want to add a ability to it that my site users can change the image background of each small triangles by select from a static menu(like a puzzle game).For example when user click on a small triangle and then click on an else triangle, two triangles exchanging?! How can i make this?! — hghayour, Jun 10 '15 at 16:18
You can treat the different elements as any other element of the DOM and manipulate it accordingly. Let me update the answer with a demo — Alvaro Montoro, Jun 10 '15 at 16:26
Great! thanks. Excuse me,can you give me this source for 9 triangles too (instead of 4triangles) ?! and What should i do for drag & drop?! :) — hghayour, Jun 10 '15 at 16:46
As I said before,I am not an expert and don't know how to do the drag and drop part (you may want to ask it as a new question). — Alvaro Montoro, Jun 10 '15 at 16:49
@AlvaroMontoro Thanks a lot for advise and useful help. i want to reverse the larger triangle and then divide it in 9 parts(instead of 4 parts). can you help me?! — hghayour, Jun 11 '15 at 15:08
@Ted i want to reverse the larger triangle below and then divide it in 9 parts(instead of 4 parts). can you help me?! — hghayour, Jun 11 '15 at 15:09
@hghayour You can see what you want here: http://jsfiddle.net/4x7sh6bj/5/. (Notice that I changed from `path` to `polygon`). If you want to add/update more triangles, the only thing that you need to do is to specify the triangle point coordinates in the `points` attribute — Alvaro Montoro, Jun 11 '15 at 15:41
@AlvaroMontoro Thanks alooooooot dear Alvaro!!! This is greaat! :) Just a question please!!! How can i add ability to swap two triangles,in this new code?! — hghayour, Jun 11 '15 at 15:54
Just apply the same JS code as above, it is generic and you'll only need to change the selector from "path" to "polygon": http://jsfiddle.net/4x7sh6bj/6/ — Alvaro Montoro, Jun 11 '15 at 16:13

score 3 · Answer 2 · answered Jun 10 '15 at 15:47

3

Using borders won't work...You can use clipping, but it isn't well supported. Take a look at the snippet below:

.imgwrap{
    text-align:center;
}
.up{
    -webkit-clip-path: polygon(100px 0px, 0px 150px, 200px 150px);
    clip-path: polygon(100px 0px, 0px 150px, 200px 150px);
    margin:0 -100px;
}
.down{
    -webkit-clip-path: polygon(0px 0px, 200px 0px, 100px 150px);
    clip-path: polygon(0px 0px, 200px 0px, 100px 150px);
}

<div class="imgwrap">
    <img  class="down" src="http://www.placehold.it/200x150"/>
    <img  class="up"src="http://www.placehold.it/200x150"/>
    <img  class="down"src="http://www.placehold.it/200x150"/>
    <br/>
    <img  class="down"src="http://www.placehold.it/200x150"/>
</div>

answered Jun 10 '15 at 15:47

Ted

14,757
2
41
58

thanks a lot Ted, is this html suitable to my work?! Actually i want to add a ability to it that my site users can change the image background of each small triangles by select from a static menu(like a puzzle game). How can i make this?! – hghayour Jun 10 '15 at 15:54
I can't answer if it's suitable or not, that's your call. See the link about support. as for how to build your application, I would suggest getting it started and come back to StackOverflow if you run into problems. – Ted Jun 10 '15 at 15:57
Thank you dear @Ted. I will do this. But just a question: some members advise me to use SVG,what's your opinion?! – hghayour Jun 10 '15 at 16:04
@hghayour I would imagine SVG will be better supported by browsers. – Ted Jun 10 '15 at 16:05

How can i collect 4 small triangle shapes to make a big triangle?

2 Answers2