CSS Border rotation -

this question has answer here:

• shape slanted side (responsive) 2 answers

in css can rotate border alone, instead of rotating whole element? this:

i wanna create slanting border video player.

i wanna accepted answer of post: click here

except instead of slanting top , bottom slants right side.

i've tried this, slants both left , right sides:

html:

<div class="skew-neg">     <p>hello world.</p>     <p>my name jonathan.</p>     <p>this box skewed.</p>     <p>in supported browsers.</p> </div>​ 

css:

html {      background: #fff;     color: lightblue;     font: 16px 'arial';     line-height: 150%; }  div {     background: blue;     margin: 50px auto 0;     padding: 20px;     width: 200px;     box-sizing: border-box;     box-shadow: 0 0 20px rgba(0,0,0,.9);     border-radius: 25px; }  .skew-neg {     -webkit-transform: skewx(-50deg);     -moz-transform: skewx(-50deg);     -ms-transform: skewx(-50deg);     -o-transform: skewx(-50deg);     transform: skewx(-50deg); }  .skew-neg > * {     -webkit-transform: skewx(50deg);     -moz-transform: skewx(50deg);     -ms-transform: skewx(50deg);     -o-transform: skewx(50deg);     transform: skewx(50deg); } 

a solution require javascript , canvas, offers great versatility -

result:

online demo

code:

function makeborder(id, bw, rskew, radius) {      var el = document.getelementbyid(id),         canvas = document.createelement('canvas'),         ctx = canvas.getcontext('2d'),          bwh = bw / 2,         w = parseint(getcomputedstyle(el).getpropertyvalue('width'), 10),         h = parseint(getcomputedstyle(el).getpropertyvalue('height'), 10);      canvas.width = w;     canvas.height = h;      /// draw border             ctx.beginpath();     roundedrect(ctx, bwh, bwh, w - bwh, h - bwh, radius, rskew);     ctx.linewidth = bw;     ctx.stroke();      /// set background     el.style.background = 'url(' + canvas.todataurl() + ') no-repeat top left'; } 

the add creating rounded rectangle (with mod. skew):

function roundedrect(ctx, x, y, w, h, rul, skew) {     //modification fit purpose here      var rur = rul,         rbr = rul,         rbl = rul,         dul = rul * 2,         dur = rul * 2,         dbr = rul * 2,         dbl = rul * 2,         _x, _y,         ww = x + w,         hh = y + h,         rr,         pi = math.pi,         pi15 = math.pi * 1.5,         pi05 = math.pi * 0.5;      //upper left         rr = [x, y, dul, dul];     _x = rr[0] + rr[2] / 2;     _y = rr[1] + rr[3] / 2;     ctx.arc(_x, _y, rul, pi, pi15);      //upper right     rr = [ww - dur, y, dur, dur];     _x = rr[0] + rr[2] / 2;     _y = rr[1] + rr[3] / 2;     ctx.arc(_x, _y, rur, pi15, 0);      ctx.lineto(ww - skew, h);      //bottom left     rr = [x, hh - dbl, dbl, dbl];     _x = rr[0] + rr[2] / 2;     _y = rr[1] + rr[3] / 2;     ctx.arc(_x, _y - 1, rbl, pi05, pi);     ctx.closepath(); } 

then call function id of element, border width , how many pixels want skew right side with:

makeborder('demo', 2, 50, 7);