色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css 做三角形

夏志豪2年前11瀏覽0評論

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 屬性,可以將多邊形直接裁剪成三角形的形狀。