用Border定義形狀

想要圖形自己畫

在做CSS的時候
我們常常會需要用到其他圖形
除了自己做出一個圖案以外
我們也可以用border來做出其他圖形
例如:

三角形:

.triangle{
border-width:40px;
border-color:#000 transparent transparent transparent;    /*/顏色設定為上黑色 右下左都為透明*/
border-style:solid;
}

 這樣設定會因為只有上方的框格有顏色,就會出現一個上方的倒三角形

圓形:

.prototype{
width:50px;        /*因為是圓形,所以寬和高要一致*/
height:50px;
border:1px solid #000;
border-radius:50%;  /*設定框格的圓角*/
}