您的位置:首页技术文章
文章详情页

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

【字号: 日期:2023-07-12 15:50:22浏览:30作者:猪猪

问题描述

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

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

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

问题解答

回答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,画一个三角形

回答2:

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

回答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;

回答4:

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

回答5:

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

回答6:

你这样就搞得很复杂了~

标签: CSS
相关文章: