How can I make this with Javascript or JQuery -
how can make using javascript or jquery? example
the thing want create figure (triangle) , make tile figure 1 in image random colors
i have tried this
<html><head> <style> body{ background-color: ivory; padding:10px; } #canvas{border:1px solid red;} </style> </head> <body> <canvas id="canvas" width="1000" height="1000"></canvas> <script type="text/javascript"> var canvas=document.getelementbyid("canvas"); var ctx=canvas.getcontext("2d"); var cw=canvas.width; var ch=canvas.height; var colwidth=cw/20; var rowheight=ch/20; for(var y=0;y<20;y++){ for(var x=0;x<20;x++){ ctx.fillstyle=randomcolor(); ctx.fillrect(x*colwidth,y*rowheight,colwidth,rowheight); ctx.strokerect(x*colwidth,y*rowheight,colwidth,rowheight); }} function randomcolor(){ return('#'+math.floor(math.random()*12345678).tostring(16)); } </script> </body></html>
you can html/css only, depends how browser support need.
html
<div class="square"> <div class="triangle-left"></div> <div class="triangle-right"></div> </div>
css
.triangle-right{ position:absolute; bottom: 0; right: 0; width: 0; height: 0; border-left: 100px solid transparent; border-right: 0 solid transparent; border-bottom: 100px solid red; } .triangle-left{ position:absolute; top: 0; left: 0; width: 0; height: 0; border-right: 100px solid transparent; border-left: 0 solid transparent; border-top: 100px solid green; } .square{ position:relative; float: left; width: 100px; height: 100px; }
Comments
Post a Comment