How to achieve chamfered CSS Border Corners rather than rounded corners?

Question

With the CSS border-radius property I can have a curvy, rounded border corner at the end.

.boxLeft{
             


        

Answer 1

Ok, so I made a JS library to automate creating chamfered borders. It has two methods for creating the chamfers:

Method 1: it creates a chamfered background using Canvas API and set it as the CSS background-image of the element.

Method 2: it appends 4 CSS based triangle DOM elements around the target, making the chamfer.

You will stick with method 1 when you can let the library set the background-image, and you will need method 2 when your target already has a background, like in 's.

The usage is simple, just call ChamferBg for using method 1, or ChamferEnvelop to use method 2:

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

The options and their defaults are:

{
    size: 5,    // chamfer size
    sw: 1,      // stroke width
    sc: 'black',    // stroke color,
    fc: undefined,  // fill color
    fp: undefined,  // URL of an image to use as fill pattern

    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 observer whenever the element
    // resizes and will refresh the background
}

You will need to set resize_observe to true if you use method 1 and your element may change its size at runtime, because then it will need to recreate the chamfered background every time it resizes.