CSS做三角形的方法有很多種,以下是其中一些常見的方法。
/* 方法一 */ .triangle { width: 0; height: 0; border-left: 50px solid transparent; /* 左邊50像素為透明 */ border-right: 50px solid transparent; /* 右邊50像素為透明 */ border-bottom: 100px solid red; /* 底邊100像素為紅色 */ } /* 方法二 */ .triangle { width: 0; height: 0; border-top: 50px solid transparent; /* 上邊50像素為透明 */ border-left: 50px solid green; /* 左邊50像素為綠色 */ border-right: 50px solid blue; /* 右邊50像素為藍色 */ border-bottom: 50px solid yellow; /* 底邊50像素為黃色 */ transform: rotate(45deg); /* 旋轉45度 */ } /* 方法三 */ .triangle { width: 0; height: 0; border-top: 50px solid transparent; /* 上邊50像素為透明 */ border-left: 50px solid green; /* 左邊50像素為綠色 */ border-right: 50px solid blue; /* 右邊50像素為藍色 */ border-bottom: 50px solid yellow; /* 底邊50像素為黃色 */ clip-path: polygon(50% 0%, 0% 100%, 100% 100%); /* 使用 clip-path 屬性 */ }
通過以上三種方法可以輕松地創建出不同形狀的三角形。
方法一使用 border 屬性,只需設置三個邊框的屬性即可。方法二使用 border 屬性和 transform 屬性,需要旋轉使其成為一個三角形。方法三使用 clip-path 屬性,可以將多邊形直接裁剪成三角形的形狀。
上一篇css 去掉after
下一篇css修改input邊框