create a triangle to keep the inner content from overflowing - Javascript Canvas

Javascript examples for Canvas:Example

  1. HOME
  2. Javascript
  3. Canvas
  4. Example

Description

create a triangle to keep the inner content from overflowing

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <style id="compiled-css" type="text/css">

.triangle {position: relative; padding: 50px; padding-top: 100px; width: 800px; margin: 0 auto;}
.triangle canvas {position: absolute; top: 0; left: 0; background-color: #cacaca; z-index: -1}
.row {text-align: center}
.item {width: 80px; height: 50px; display: inline-block; background-color: #fc0}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){/* www .ja  va 2s.  c om*/
function draw() {
  var canvas = document.getElementById('canvas'),
      parent = $('#canvas').parent('.triangle'),
      pw = parent.outerWidth(),
      ph = parent.outerHeight();
   canvas.width = pw;
   canvas.height = ph;
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(pw/2,0);
    ctx.lineTo(pw,ph);
    ctx.lineTo(0,ph);
    ctx.fill();
  }
}
draw();
    });

      </script> 
   </head> 
   <body> 
      <div class="triangle"> 
         <div class="row"> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <div class="row"> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
            <div class="item"></div> 
         </div> 
         <canvas id="canvas"></canvas> 
      </div>  
   </body>
</html>

Related Tutorials