HTML5中用css盒模型繪畫圖形
阿新 • • 發佈：2021-11-03
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style type="text/css"> #div1{ width: 0px; height: 0px; background: lightblue; border: 150px solid rgb(255, 255, 255); border-bottom-color:lightblue；
} #div2{ width: 900px; height: 420px; background: lightgreen; border-top-left-radius: 210px; border-bottom-left-radius: 210px; border-top-right-radius: 210px; border-bottom-right-radius: 210px; } #div3{ width: 20px; height: 20px; border: 50px rgb(226, 139, 212) solid; border-radius: 50%; border-bottom-color: lightblue; border-left-color: lightpink; border-right-color:lightgreen ; } </style> </head> <body> <div id="div1"></div> <hr> <div id="div2"></div> <hr> <div id="div3"></div> <hr> </body> </html>
1
比如這個三角形是由一個常規的正方形變化來的
三角形的頂點部分就是程式碼中的
#div1{
width: 0px;
height: 0px;
此時的高和寬都為0
此時集中為一點
}
#div1{
background: lightblue;
此時預設背景為lightblue色
border: 150px solid rgb(255, 255, 255);
然後定義border的大小為150px白色，此時整個被白色覆蓋
border-bottom-color:lightblue;
然後從這個點到整個大盒子的底部所連線形成的圖型呈一個三角形，然後定義為lightblue色，此時把白色覆蓋出現了一個lightblue的三角形
}
而border的解釋
如圖
如果想要得到等腰梯形的話
修改程式碼如下
#div1{
width: 150px;
height:0px;
background: lightblue;
border: 150px solid rgb(255, 255, 255);
border-bottom-color:lightblue;
}
只需要width改為150px
此時就組成了上底為150px，下底為300的等腰梯形
border的解釋如下圖
2.
如圖所示的圖形就是由一個長方形變化來的
具體過程就是四個角進行新增圓角邊框屬性
要呈現這個效果新增圓角邊框的值為
大長方形的一半
具體程式碼如下
#div2{
width: 900px;
height: 420px;
background: lightgreen;
border-top-left-radius: 210px;
border-bottom-left-radius: 210px;
border-top-right-radius: 210px;
border-bottom-right-radius: 210px;
}
3
要實現如上圖的效果幾個顏色不同的扇形組合成的影象
首先要實現如圖所示的效果
程式碼如下
#div3{ width: 50px; height: 50px; border: 50px rgb(226, 139, 212) solid;} 然後再進行新增圓角邊框屬性 border-radius: 50%; 效果如下
最後新增上幾個不同的顏色屬性就可以了
程式碼如下
#div3{ border-bottom-color: lightblue; border-left-color: lightpink; border-right-color:lightgreen ; } 就可以得到如下的效果了啦