1. 程式人生 > >css繪畫三角形,實現一些圖形

css繪畫三角形,實現一些圖形

      html程式碼如下:<div class="circle"></div>

  主要用css的border屬性來實現高度和寬度設定為0;line-height和font-size也設定為0,主要是解決ie6中容易被撐開的不相容性問題

第一種斜邊在盒子的邊上

  css程式碼如下

.circle {
    width:0;
    height:0;
    border:39px solid #000;
    border-color:#FF0000 transparent transparent transparent;
    border-style:solid dashed dashed dashed;
    line-height:0;

     font-size:0;
}

     由於ie6不支援透明,所以樣式裡面用dashed來解決不透明問題

執行結果如下圖:

       第二種是斜邊在盒子的對角線上

.circle {
    height: 0;
    width: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
    border-color: #FF9600 #3366ff transparent transparent;
    border-style: solid solid dashed dashed;
    border-width: 40px 40px 0 0 ;
}