CSS border rotation

Question

In css can I rotate the border only and not rotate the whole element? something like that:

Basically I want to create an oblique frame for my video player.

I want to do something like the accepted answer to this post: click here

except that instead of tilting the upper and lower parts, it is tilted only to the right side.

I tried this, but it tilts the left and right sides:

HTML:

<div class="skew-neg"> <p>Hello World.</p> <p>My name is Jonathan.</p> <p>This box is 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); } 

Answer 1

A solution that requires JavaScript and canvas, but offers great versatility -

Result:

ONLINE DEMO

the 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 as background el.style.background = 'url(' + canvas.toDataURL() + ') no-repeat top left'; } 

Add this to create a rounded rectangle (with a skew mod):

 function roundedRect(ctx, x, y, w, h, rul, skew) { //modification to 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 you simply call this function with the element identifier, border width and the number of pixels that you want to skew on the right side:

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

Answer 2

You can try using CSS-generated arrows. The following is an overview of how to create and use them.

I do not think this is a solution, but it could be one of them. You can find useful information.

The best

Answer 3

Follow here to solve this problem :)

Click here

Hope this helps you

 .b-border{ display: inline-block; position: relative; border: solid #333; border-width: 1px 1px 0px 1px; padding: 20px; margin-bottom: 100px; } .b-border.border-right{ border-width: 1px 0 1px 1px; } .b-border.border-right:after{ content: ""; position: absolute; right: -30px; border-top: 1px solid #333; border-left: none medium; top: -1px; left: auto; width: 30px; height: 100%; background: linear-gradient(to top left, white calc(50% - 1px), #000 1px, white 50%); } .b-border:after{ content: ""; position: absolute; left: -1px; bottom: -15%; border-left: 1px solid #333; height: 15%; width: calc(100% + 1px); background: linear-gradient(to right bottom, white calc(50% - 1px), #000 1px, white 50%); } 

 <div class="b-border border-right"> Hello :) </div> <p></p> <div class="b-border" style="width: 300px;"> Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur </div> 

Answer 4

What you can do is something like this: http://jsfiddle.net/py9Ze/

HTML:

 <div id="vid-container"> <span><embed>this is straight</embed></span> </div> 

CSS

 #vid-container { border: 1px solid; height: 200px; -moz-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } span { position: absolute; -moz-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg); } 

Essentially set the border around the parent container and rotate it x degrees, then rotate the child -x degrees.

PS I'm behind a firewall, so I can’t see the image you posted, so it can be far from what you wanted.