JSFiddle - React, Tailwind, and code Playground

by demee

HTML

<div id="canvas"></div>

CSS

#canvas {
    width: 320px; 
    height: 200px; 
    border: 1px solid black;
}

JavaScript

var paper = new Raphael('canvas');

var m = 50/3;

paper.path('M 10 190\
            L 60 190\
            L 60 50\
            L 10 50\
            Z').attr('fill', '90-#000-#0f0').attr('opacity', 0.5).attr('stroke', '#fff');
paper.path('M 60 190\
            L ' + ( 60 + m) + ' ' + (190 - m) + 
            'L ' + ( 60 + m) + ' ' + ( 50 - m) +  
            'L 60 50 Z').attr('fill', '90-#000-#0f0').attr('stroke', '#fff'); 

paper.path('M 60 50'+ 
           'L ' + (60 + m) + ' ' + ( 50 - m) + 
           'L ' + (10 + m) + ' ' + ( 50 - m ) + 
           'L 10 50 Z').attr('fill', '#0f0').attr('stroke', '#fff');