一开始这样写，一片混乱...
border-top: 100% solid #eed37a;
border-left: 2rem solid #eed37a;
border-right: 2rem solid #000;
border-bottom: 100% solid #fff;然后,还是不行，无法设置高度。
width: 0;
height: 0;
border: 32rem solid;
border-top: 0;
border-color: #eed37a #000 #fff #eed37a;
怎样使border支持百分比，通过css实现这个矩形？
你到底要干嘛？
用background填充一个矩形p不行吗？
好吧，因为p的宽度被你指定为0了，所以百分号不行。用em或则rem是可以的
http://codepen.io/flybywind/pen/VaRwyY
从这个demo可以看出，
border-left-width border-right-width等于矩形的宽度，border-top-width border-bottom-width等于矩形高度活用4个角的border是一种技巧，你还可以通过把某些角的颜色设为transparent，画一个三角形
可以用border-left,border-right,border-top,border-bottom 写个四色的矩形，宽度不能用百分比，也可以用background直接写p的背景。
你想问的是通过border生成矩形吧。
width:0;
height:0;
overflow:hidden;
font-size:0;
display:inline-block;
border-width:20px 100px 20px 100px;
border-color:black red blue yellow;
border-style:solid solid solid solid;
额？两个三角形堆在一起不就行了
用背景色填充一个
p不就可以了么你这样就搞得很复杂了~