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

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -