Question

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

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

enter image description here

我想做一些像这篇文章的接受答案：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

您可以尝试使用CSS Generated Arrows。 Here is an overview如何创建和使用它们。

我不相信这是解决方案，但它可能是其中之一。你可能会发现这个技巧很有用。

最佳

Answer 2

需要JavaScript和画布的解决方案，但提供了极大的多功能性 -

结果：

Snapshot

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

添加此项以创建圆角矩形（使用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(); }

然后你只需要调用这个函数，其中包含元素ID，边框宽度以及你想用右边倾斜的像素数：

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

Answer 3

按照此处解决此问题：）

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>

Answer 4

你能做的是这样的事：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我在防火墙后面，所以我看不到您发布的图像，所以这可能与您想要的不同。

CSS边框旋转

4 个答案: