CSS Border rotation

Question

In css can i rotate the border alone, instead of rotating the whole element? something like this:

I basically wanna create a slanting border for my video player.

enter image description here

I wanna do something like the accepted answer of this post: click here

except that instead of slanting the top and bottom it slants only the right side.

I've tried this, but it slants both 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);
}

You could try using CSS Generated Arrows. Here you have great documentation about them: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/. I don't believe this is the solution, BUT it could be one of them. You might find the trick helpfull. — Santiago Baigorria, Jul 11 '13 at 14:00
nice bro! I plus voted your comment, does the reputation change on plus votes for comments> — tenstar, Jul 11 '13 at 14:01
I'll put it as the answer if that is what you where looking for! — Santiago Baigorria, Jul 11 '13 at 14:03
nope, didn't work for what i wanted, but still helped a lot, that's why i plus voted, wait i'll plus vote your answer too! — tenstar, Jul 11 '13 at 14:05
Oh not really? Then i souldn't have done that... thanks anyway — Santiago Baigorria, Jul 11 '13 at 14:08
have you considered using SVG for this? It's generally more suitable for drawing shapes than CSS. — Spudley, Jul 11 '13 at 15:16
@Spudley i am not drawing shapes. it is a div whose border i want to stylize — tenstar, Jul 12 '13 at 10:25

score 1 · Answer 1 · edited Nov 29 '16 at 14:47

1

You could try using CSS Generated Arrows. Here is an overview of how to create and use them.

I don't believe this is the solution, BUT it could be one of them. You might find the trick helpfull.

Best

edited Nov 29 '16 at 14:47

monkeyhouse

2,875
3
27
42

answered Jul 11 '13 at 14:04

Santiago Baigorria

700
1
6
15

score 1 · Accepted Answer · 2013-07-11T16:43:30.410

1

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

Result:

Snapshot

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

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

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 just call this function with ID of element, border width and how many pixels you want to skew the right side with:

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

edited Jul 11 '13 at 16:43

answered Jul 11 '13 at 14:20

can i have rounded borders for it? If yes, i'll accept your answer (Please give the code) – tenstar Jul 11 '13 at 14:21
1

@tenstar dude, that's a bit misleading, but yes you can have rounded border and anything else. – Jul 11 '13 at 14:24
i've tried border radius in the link you mentioned but only the top-left corner rounds-up. – tenstar Jul 11 '13 at 14:26
i've tried this: `div { background-color: black; color:white; position: relative; width: 100px; } #demo:after { content: ' '; height: 0; position: absolute; width: 0; border: 10px solid transparent; border-top-color: black; border-left-color: black; left: 100px; }` – tenstar Jul 11 '13 at 14:32
@tenstar see update (online fiddle is also updated). This should produce what you want. Fine-adjust as you need. – Jul 11 '13 at 14:34
but the bottom right one is not rounded! – tenstar Jul 11 '13 at 14:36
@tenstar I'll leave that challenge to you :-) – Jul 11 '13 at 14:39
come on! ok i'll try! – tenstar Jul 11 '13 at 14:41
1

@tenstar You know, we are not suppose to write all the code *for* you, we are here to help you with a problem and I think I and others did + some. You need to do some on your own ;) Don't forget to upvote/accept if answer helped. – Jul 11 '13 at 14:43
k i give up!!! please tell me! – tenstar Jul 11 '13 at 14:44

score 1 · Answer 3 · answered Aug 05 '15 at 06:47

Follow here to solve this problem :)

click here

Hopefully it can help 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>

score 0 · Answer 4 · answered Jul 11 '13 at 14:10

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);
}

Basically put a border around the parent container and rotate it x degrees, then rotate the child -x degrees.

PS I am behind a firewall so I cant see the image you posted so this might be way off from what you wanted.

can you please check the edit i made, i mentioned another stackoverflow post and told what i want — tenstar, Jul 11 '13 at 15:04

CSS Border rotation

4 Answers4

Linked