javascript - How can i collect 4 small triangle shapes to make a big triangle? -
i want make image background triangle made gathering 4small triangles,like image
how can make 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>
as mentioned in comments, case in svg/canvas better solution. not expert @ them, creating simple pattern 1 want simple (i used background solution 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: requested in comments below, added code show how manipulate elements (click on 2 triangles , images swap):
var step = 0; var $prev; $("path").on("click", function() { switch (step) { // if it's first step: save current element later case 0: step = 1; $prev = $(this); break; // if it's second step: swap images , 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 see on jsfiddle: http://jsfiddle.net/4x7sh6bj/1/
Comments
Post a Comment