在css中排序倾斜的盒子形状？

Question

我正试图在css中创建这个形状：

但是我有点失去了怎么做。我现在有一个三角形：

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

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

因为某些原因，百分比/ vh / vw在css中没有使用border-width（不确定它是否支持？）

我不确定如何从三角形制作 - ＆gt;我想象的形状。有什么建议吗？

感谢您的帮助！ ： - ）

Answer 1

这是怎么回事？

http://jsfiddle.net/xVzMZ/

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

Answer 2

右边框，如：

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

Seems to look right.调整起来并不难。