CSS Пограничное вращение

Question

В css я могу вращать границу только, а не вращать весь элемент? что-то вроде этого:

В основном я хочу создать наклонную границу для моего видеоплеера.

Я хочу сделать что-то вроде принятого ответа на эту должность: click here

за исключением того, что вместо косо сверху и снизу она Наклоняет только правая сторона.

Я попытался это, но он наклоняет как левые и правые части:

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

Решение, которое требует JavaScript и холст, но и предлагает большую гибкость -

Результат:

ONLINE DEMO

Код:

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

Добавить это для создания закругленного прямоугольника (с модемом.для перекоса):

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

Тогда вы просто вызвать эту функцию с идентификатором элемента, ширина границы и сколько пикселей вы хотите, чтобы исказить правую сторону с:

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

Answer 2

Вы можете попробовать использовать CSS Generated стрелки. Here is an overview о том, как их создавать и использовать.

Я не верю, что это решение, но это может быть один из них. Вы можете найти трюк полезный.

Лучшие

Answer 3

Что вы можете сделать что-то вроде этого: 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); 
} 

В основном положить границу вокруг родительского контейнера и поверните его x градусов, затем поверните ребенок -x градусов.

PS Я за брандмауэром, поэтому я не могу увидеть изображение, которое вы разместили, так что это может быть далеко от того, что вы хотели.

Answer 4

Следуйте здесь, чтобы решить эту проблему :)

click here

Надеется, что это может помочь вам

.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>