CSS3中的三角標識是指利用CSS3的強大功能來創建各種形態的三角形,這些三角形可以用于制作下拉菜單、提示框、箭頭等。在CSS3中,創建三角標識的方法主要有以下幾種:
// 創建一個大小為0的實心三角 #triangle { width: 0; height: 0; border-top: 50px solid #f00; border-right: 50px solid transparent; border-left: 50px solid transparent; } // 創建一個帶有邊緣的實心三角 #triangle { width: 0; height: 0; border-top: 50px solid #f00; border-right: 50px solid transparent; border-left: 50px solid transparent; border-bottom: 50px solid #ff0; } // 創建一個大小為0的空心三角 #triangle { width: 0; height: 0; border-top: 50px solid transparent; border-right: 50px solid #f00; border-left: 50px solid #f00; border-bottom: 50px solid transparent; } // 創建一個帶有邊緣的空心三角 #triangle { width: 0; height: 0; border-top: 50px solid transparent; border-right: 50px solid #f00; border-left: 50px solid #f00; border-bottom: 50px solid #ff0; } // 創建一個斜角三角形 #triangle { width: 100px; height: 50px; background: #f00; transform: skew(-45deg); }
以上代碼示例只是其中的幾種方法,通過調整各個屬性的值,可以制作出更加豐富多彩的三角標識。同時,建議在制作三角標識時,盡量避免使用多余的代碼,減少對頁面性能的影響。
下一篇css3中2d轉換