搜尋

首頁  >  問答  >  主體

前端 - 使用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实现这个矩形?

PHP中文网PHP中文网2863 天前679

全部回覆(6)我來回復

  • 巴扎黑

    巴扎黑2017-04-17 11:39:28

    你到底要幹嘛?
    用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,畫一個三角形

    回覆
    0
  • 高洛峰

    高洛峰2017-04-17 11:39:28

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

    回覆
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:39:28

    你想問的是透過border產生矩形吧。
    width:0;
    height:0;
    overflow:hidden;
    font-size:0;
    display:inline-block;
    border-width:20px 100px 20px ;
    border-color:black red blue yellow;
    border-style:solid solid solid solid;

    回覆
    0
  • 大家讲道理

    大家讲道理2017-04-17 11:39:28

    額?兩個三角形堆在一起不就行了

    回覆
    0
  • 阿神

    阿神2017-04-17 11:39:28

    用背景色填滿一個p不就可以了麼

    回覆
    0
  • 黄舟

    黄舟2017-04-17 11:39:28

    你這樣就搞得很複雜了~

    回覆
    0
  • 取消回覆