Inclined stroke

can be used to stroke out price or other stuff

by Alexander Zonov

HTML

<div class="price-area">
  <canvas class="inclined-stroke" width="100%" height="100%"></canvas>
</div>

CSS

html, body { 
  margin: 0;
  padding: 0;
}

.inclined-stroke {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.price-area {
  position: absolute;
  left: 0;
  top: 0;
  height: 102px;
  width: 50%;
  background: #f0f0f0;
  padding: 0;
  margin: 0;
}

JavaScript

var inclinedStrokes = document.querySelectorAll('.inclined-stroke');

Array.prototype.slice.call(inclinedStrokes).map(function(c) {
	var ctx = c.getContext("2d");
  ctx.strokeStyle="gray";
  ctx.moveTo(0,100);
  ctx.lineTo(100,0);
  ctx.stroke();
});