<div class="item">
  <!--
    these styles in the css section
   -->
</div>
<div class="item-1">
  <svg width="100px" height="100px">
    <path fill="red" d="M0,0 100,50 0,100z"></path>
    <text x="20px" y="55px" style="font-size:24px; fill:#fff;">svg</text>
  </svg>
</div>

.item{
  width:100px;
  height:100px;
  border-left:100px solid red;
  border-top:50px solid  transparent;
  border-right:0px solid transparent;
  border-bottom:50px solid transparent;
  box-sizing:border-box;
  position: relative;
}

.item:after{
  content:"css";
  position: absolute;
  left: 50%;
  top:50%;
  transform:translate(-85px,-10px);
  color:#fff;
  font-size:24px;
}

  var canvas = document.createElement ("canvas");
  var main = document.getElementsByTagName ("body")[0];
  main.appendChild (canvas);

  canvas.setAttribute ("id", "draw"); 
  canvas.setAttribute ("width", "100"); 
  canvas.setAttribute ("height", "100");  
  var context = canvas.getContext ("2d");



  context.beginPath();
  context.moveTo (0,0);
  context.lineTo (100,50);
  context.lineTo (0,100);
  context.closePath ();
  context.lineWidth = 1;
  context.stroke();
  context.fillStyle = "red";
  context.fill();

  context.font = "22px serif";

  context.fillStyle = "#fff";
  context.fillText("canvas", 10, 55);