前端 - 使用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:你这样就搞得很复杂了~
相关文章:
1. 怎样用python给mp3添加封面?2. 上传多图时,最后一张图为缩略图,想设置第一张图为缩略图怎么解决?3. python - 如何获取rabbitmq连接的celery的个数4. js怎样实现在类似qq的联系人分组中进行搜索后,又可恢复原分组的界面?5. TP6里多应用里如何开启调试跟踪6. 数据库 - Mysql的存储过程真的是个坑!求助下面的存储过程哪里错啦,实在是找不到哪里的问题了。7. javascript - 百度地图一开始设置了中心点,怎么通过按钮在调转到对应的中心点????8. mysql优化 - mysql 一张表如果不能确保字段列长度一致,是不是就不需要用到char。9. python - 如何将文本文件的CR换行符换成LF换行符?10. python 中文乱码问题