Dynamic CSS 0:N Triangles in Container - css

Question

I'm working on an Electron+Vue application that draws a grid styled map. For each cell (a room) I would like to indicate walls. For NSWE I can border-left/etc. For NW/NE/SW/SE I would like to draw an angled wall or triangle. This must be done dynamically (e.g. via classes that I inject into each cell).
There seem to be a number of ways to draw triangles and that works for a single instance or multiple if I don't need it to be dynamic. How can I do this dynamically?
Here is what I'm attempting:
<!-- ... inside a component -->
<table>
<tbody>
<tr
v-for="(row, y) in grid"
:key="y"
>
<td
v-for="(room, x) in row"
:key="x"
:class="roomClass(room)"
>
<!-- I want to conditionally add a corner triangle
in one or more corners of this cell -->
</td>
</tr>
</tbody>
</table>
// Component methods
roomClass(room) {
return {
wallseast : room.walls && room.walls.includes('southeast'),
wallswest : room.walls && room.walls.includes('southwest'),
<!-- ...so on... -->
};
},
<style scoped>
td.wallseast {
/* ??? */
}
td.wallswest {
/* ??? */
}
</style>
Update: A better example of what I'm doing. Below is a image showing a map with some walls. Note the top right (or NE) corner of one of the rooms. I would like to be able to draw this on any/all corners.

Answer 1

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

Answer 2

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 -->

Answer 3

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();
}