CSS边框旋转 [英] CSS Border rotation

问题描述

在css中，我可以单独旋转边框，而不是旋转整个元素？
这样的东西：

我基本上想为我的视频播放器创建一个斜边。

我想做此帖的公认答案：

代码：

  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（）; 
 
 ///设置为背景
 el.style.background ='url（'+ canvas.toDataURL（）+'）no-repeat top left'; 
} 
  

添加这个用于创建圆角矩形

  function roundedRect（ctx，x，y，w，h，rul，skew）{
 // modification to适合目的这里
 
 var rur = rul，
 rbr = rul，
 rbl = rul，
 dul = rul * 2，
 dur = 2，
 dbr = rul * 2，
 dbl = rul * 2，
 _x，_y，
 ww = x + w，
 hh = y + 
 rr，
 pi = Math.PI，
 pi15 = Math.PI * 1.5，
 pi05 = Math.PI * 0.5; 
 
 //左上角
 rr = [x，y，dul，dul]; 
 _x = rr [0] + rr [2] / 2; 
 _y = rr [1] + rr [3] / 2; 
 ctx.arc（_x，_y，rul，pi，pi15）; 
 
 //右上
 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）; 
 
 //左下角
 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（）; 
} 
  

然后你只需调用这个函数的元素ID，边框宽度和多少您想要偏右侧的像素：

  makeBorder（'demo'，2，50，7） 
  

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.

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

解决方案

A solution that require JavaScript and canvas, but 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 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);

这篇关于CSS边框旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！