前端 - 使用css畫一個(gè)矩形？
問題描述
一開始這樣寫，一片混亂...
border-top: 100% solid #eed37a; border-left: 2rem solid #eed37a; border-right: 2rem solid #000; border-bottom: 100% solid #fff;
然后,還是不行，無法設(shè)置高度。
width: 0; height: 0; border: 32rem solid; border-top: 0; border-color: #eed37a #000 #fff #eed37a;
怎樣使border支持百分比，通過css實(shí)現(xiàn)這個(gè)矩形？
問題解答
回答1：你到底要干嘛？用background填充一個(gè)矩形p不行嗎？
好吧，因?yàn)閜的寬度被你指定為0了，所以百分號(hào)不行。用em或則rem是可以的
http://codepen.io/flybywind/pen/VaRwyY
從這個(gè)demo可以看出，border-left-width + border-right-width 等于矩形的寬度， border-top-width + border-bottom-width 等于矩形高度
活用4個(gè)角的border是一種技巧，你還可以通過把某些角的顏色設(shè)為transparent，畫一個(gè)三角形
回答2：可以用border-left,border-right,border-top,border-bottom 寫個(gè)四色的矩形，寬度不能用百分比，也可以用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：額？?jī)蓚€(gè)三角形堆在一起不就行了
回答5：用背景色填充一個(gè)p不就可以了麼
回答6：你這樣就搞得很復(fù)雜了~
相關(guān)文章：
1. angular.js - 各位大神們，你們混合開發(fā)，web方式中更推薦用什么框架呀？ react？vue？angular？謝謝～2. angular.js - angularjs的自定義過濾器如何給文字加顏色？3. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問題。4. docker-machine添加一個(gè)已有的docker主機(jī)問題5. javascript - IOS微信audio標(biāo)簽不能通過touchend播放6. html - 如何用css令背景圖能夠撐滿本身會(huì)滾動(dòng)的頁面？7. 老師百度網(wǎng)盤分享一下WampServer的包啊,我們下載幾kb要下載一天的.8. javascript - htaccess rewrite 的問題9. 自己安裝了apache2.2,但是重啟apache后出錯(cuò)了，求解！謝謝！10. html5 - vuex 為什么需要action,我發(fā)現(xiàn)進(jìn)行異步操作回調(diào)中直接操作mutation也沒有報(bào)錯(cuò)
網(wǎng)公網(wǎng)安備