CSS 魔法系列：純 CSS 繪製三角形（各類角度）

　　咱們的網頁由於 CSS 而呈現變幻無窮的風格。這一看似簡單的樣式語言在使用中很是靈活，只要你發揮創意就能實現不少比人想象不到的效果。特別是隨着 CSS3 的普遍使用，更多新奇的 CSS 做品涌現出來。
　　今天這篇文章開始推出《百變 CSS 系列》，給你們帶來 CSS 在網頁中以及圖形繪製中的使用。首先給你們打來的是流行的 CSS 三角形繪製方法。
您可能感興趣的相關文章
35個讓人驚訝的 CSS3 動畫效果演示
Web 前沿：一組極其絢麗的 CSS3 效果
Web 前沿：那些讓人驚歎的 CSS3 應用
十款精心挑選的在線 CSS3 代碼生成工具
年度盛宴：2012年最精彩的 CSS3 教程

 
Triangle Up  

 

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

　　 

Triangle Down  

 

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

　　 

Triangle Left  

 

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

　　

Triangle Right  

 

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

　　

Triangle Top Left  

 

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

　　

Triangle Top Right  

 

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

}

　　

Triangle Bottom Left  

 

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

　　

Triangle Bottom Right  

 

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

 

您可能感興趣的相關文章
CSS3 在網頁設計中的20佳驚豔應用
推薦12個漂亮的 CSS3 按鈕實現方案
推薦10個很是優秀的 CSS3 開發工具
分享50個漂亮的 CSS3 最佳應用示例
24款很是實用的 CSS3 工具終極收藏

 
本文連接：百變 CSS 系列：純 CSS 繪製三角形（各類方向）
編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源
轉載於猿2048:➞《CSS 魔法系列：純 CSS 繪製三角形（各類角度）》