在CSS中倾斜的框形状的排序？

enter image description here

，但我有点丢了怎么办等等。我有一个三角形做现在这一点：

var resY = $(window).height; 
var resX = $(window).width; 

$('#slide1-container').css({'border-bottom-width': resY, 'border-left-width': .4*resX});

因为某种原因百分比/ VH/VW与边框宽度在CSS不工作

我（不知道它的支持？）我不确定如何从三角形 - >我所描绘的形状。有什么建议么？

感谢您的帮助！ :-)

2013-11-27 shanling

这是怎么回事？

#shape { 
    border-bottom: 150px solid black; 
    border-left: 50px solid transparent; 
    height: 0; 
    width: 100px; 
}

2013-11-27 23:55:18

看起来很完美！你介意解释边界实际上是如何倾斜的吗？我有点困惑，因为这实际上是在移动盒子的形状 – shanling

@shanling：两个边界之间的连接是这样倾斜的，底部边框很高。（所以三角形部分最终是150像素高，50像素宽。）这有帮助吗？ http://jsfiddle.net/xVzMZ/1/ – Ryan

“盒子”实际上是div的底部边框，它使用了这样一个事实，即边框的每一侧的角都倾斜以形成该形状，如果这样感。 –

右边框，如：

#trapezoid { 
    border-bottom: 2em solid black; 
    border-left: 1em solid transparent; 
    border-right: 1.5em solid black; 
    width: 0; 
}

Seems to look right.这不是很难调整。

2013-11-27 23:56:17 Ryan

回答