前端 - 使用css画一个矩形？

Question

一开始这样写，一片混乱...

    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实现这个矩形？

Answer 1

你到底要干嘛？
用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，画一个三角形

Answer 2

可以用border-left,border-right,border-top,border-bottom 写个四色的矩形，宽度不能用百分比，也可以用background直接写p的背景。

Answer 3

你想问的是通过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;

Answer 4

额？两个三角形堆在一起不就行了

Answer 5

用背景色填充一个p不就可以了麽

Answer 6

你这样就搞得很复杂了~