前端 - 使用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實現(xiàn)這個矩形？
問題解答
回答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. mysql在限制條件下篩選某列數(shù)據(jù)相同的值2. php - 生產(chǎn)環(huán)境下,給MySQL添加索引,修改表結(jié)構(gòu)操作,如何才能讓線上業(yè)務不受影響？3. mysql - Sql union 操作4. mysql - 僅僅只是把單引號與反斜杠轉(zhuǎn)義不用prepare statement能否避免sql注入？5. java - Mybatis 數(shù)據(jù)庫多表關聯(lián)分頁的問題6. mysql主主同步，從庫不同步應該怎么解決？7. mysql - 拖拽重排序后怎么插入數(shù)據(jù)庫?8. 新入手layuiadmin，部署到tp中。想用php自已寫一個后臺管理系統(tǒng)。9. android - 安卓做前端，PHP做后臺服務器 有什么需要注意的？10. mysql 獲取時間函數(shù)unix_timestamp 問題？
網(wǎng)公網(wǎng)安備