[Vuejs]-Dynamic CSS 0:N Triangles in Container

by

0👍

✅

I probably wouldn’t use a table… but – the concept would be the same.

You could use pseudo elements to limit the markup… and make triangles, or put an element in there… and do the border-hack trick for triangles… but I’d just use an SVG/poygon to make the triangle. You’ll be just dynamically generating it, so – the extra markup is fine. It is – what it is.

You should probably have a little view component. Then have all of the triangles in there, and based on hover or game-state – give them a class or whatever to let it know what triangle to show.

<room>
    <svg class='arrow ne'><polygon points='100,0 100,100 0,0'></svg>
        
    <svg class='arrow sw'><polygon points='100,100 0,100 0,0'></svg>
        

    <arrow class='sw'>
        <!-- or if you really want... you can make the shape with CSS... -->
    </arrow>
</room>

https://codepen.io/sheriffderek/pen/0cdb7ccc2efd2f1f5868380d0afae436

0👍

Did you mean something like this?

  


//CSS
    .sq-right {
        width: 201px;
        height: 201px;
        background-color: #fff;
        transform: rotate(30deg);
        position: absolute;
        top: -66px;
        left: -136px;
        text-align: center;
    }
    .sq-left {
        width: 201px;
        height: 201px;
        background-color: #fff;
        transform: rotate(-30deg);
        position: absolute;
        top: -66px;
        left: 136px;
        text-align: center;
    }
    
    .bg-color{
        background-color: red;
        height: 172px;
        width: 201px;
        position: absolute;
        left: 142px;
        top: 106px;
        text-align:center;
        overflow:hidden;
        
    }
    <!-- language: lang-html -->
    
        <div id="parentDiv">
          <div class="bg-color"></div>
          <div class="sq-right"></div>
          <div class="sq-left"></div>      
        </div>
    
    <!-- end snippet -->

0👍

So in that case you have to use SVG or canvas to create multiple triangles with the help of loop.

var canvas = document.getElementById('canvas');
  if (canvas.getContext)
  {
    var context = canvas.getContext('2d');

    context.beginPath();
    context.moveTo(75,75);
    context.lineTo(10,75);
    context.lineTo(10,25);
    context.fill();
  }

Leave a comment