Chamfer.js

Add chamfered corners to any HTML element with 2 available methods

Download at GitHub.

For simple scenarios, given any element, method 1 will set its background-image with an image that has chamfered borders and optionally a solid fill.

For advanced scenarios where you have content over the corners (to chamfer an img for example), use method 2, which creates overlay triangular div elements for each chamfered corner.

Samples method 1 - `ChamferBg()`

Icons box:

4 edges chamfer:

Item 1 Item 1 Item 1 Item 1 Item 1 Item 1

2 edges chamfer:

Item 1 Item 1 Item 1 Item 1 Item 1 Item 1

Textarea 2 edges + resizing grip:

Fill pattern:

Samples method 2 - `ChamferEnvelop()`

Image chamfer:

Huge image (>1MB - size might be unknown at page load):

Card+text chamfer:

Card title

If you need a solid background here, you MUST set it in CSS for this element; do NOT set if via Chamfer.js else it will cover the text.

Usage:

Include chamfer.js:

<script src="dist/chamfer.js"></script>

Include ResizeObserver.js polyfill if you use 'resize_observe' functionality (see options):

<script src="dist/ResizeObserver.js"></script>

Call ChamferBg/ChamferEnvelop(el:Element, [options:Object]) for each element to chamfer:

var el = document.getElementById('box');
ChamferBg(el, {
	size: 20,
	sw: 6,
	sc: '#447aec',
	fc: '#21ceff',
	tl: false,
	br: false,
	resize_observe: true
});

The following options and their default values are available:

{
	size: 5,	// chamfer size
	sw: 1,		// stroke width
	sc: 'black',	// stroke color,
	fc: undefined,	// fill color
	cc: 'white'	// corner color (for ChamferEnvelop)

	tl: true,	// chamfer top-left corner?
	tr: true,	// chamfer top-right corner?
	bl: true,	// chamfer bottom-left corner?
	br: true,	// chamfer bottom-right corner?

	resize_observe: false
	// turn on resize_observe observer?
	// this will observe whenever the element
	// resizes and will refresh the background
}