用css做出來一個三角形

標籤：絕對位置   lock   splay   color   jpg   parent   ges   png   技術   

用css做出來一個三角形

  
 <!--不設定寬高  轉換行內塊  邊線設定成寬度-->      <div class="triangle"> 三角形複習<span></span></div>    /* 相對定位*/.triangle {            position: relative;        } /* 絕對位置*/        .triangle span  {            position: absolute;            top: 5px;            display: inline-block; /* 行內塊*/            width: 0;               height: 0;            border-width: 5px;           /*邊線顏色設定 transparent 透明   順序 上 右 下  左 更改順序可以得到不同角度的正三角行 */            border-color: transparent   red  transparent transparent ;                    /*邊線樣式設定為實線*/            border-style: solid solid solid solid;        }

  

  

#triangle-topleft {    width: 0;    height: 0;    border-top: 100px solid red;    border-right: 100px solid transparent;}

　　

 

#triangle-topright {    width: 0;    height: 0;    border-top: 100px solid red;    border-left: 100px solid transparent; }

　　

#triangle-bottomleft {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-right: 100px solid transparent;}

　　

   

#triangle-bottomright {    width: 0;    height: 0;    border-bottom: 100px solid red;    border-left: 100px solid transparent;}

　　

 

用css做出來一個三角形