I have a working live codepen demo at here. When you click on the grid, it will draw a red square. May I know how to change the red square into a red triangle? I have tried to modify the code below. Thank you for reading and have a nice day.

newDot.className = 'red-dot';
// Set coordinates:
newDot.style.top = y   'px';
newDot.style.left = x   'px';

CodePudding user response：

Make the squares into triangles using CSS

clip-path: polygon(50% 0, 100% 100%, 0 100%)