CSS倒三角的制作方法是通過在一個塊級元素的邊框上插入一個三角形,并將其顏色設置成與塊級元素背景色相同或者與頁面其它元素的顏色匹配。實現方式有多種,但其中最為簡單的方式是使用border屬性與width和height屬性來定義三角形的大小和位置。
/* 箭頭向上形狀 */
.triangle-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #000;
}
/* 箭頭向下形狀 */
.triangle-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 10px solid #000;
}
/* 箭頭向左形狀 */
.triangle-left {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-right: 10px solid #000;
border-bottom: 5px solid transparent;
}
/* 箭頭向右形狀 */
.triangle-right {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid #000;
border-bottom: 5px solid transparent;
}
上述代碼定義了四種不同朝向的倒三角形狀,使用時只需要將寬和高指定為0,然后使用border屬性來定義其中兩條邊的寬度并選擇使用哪兩條邊繪制,剩下的兩邊則設定為透明即可。
上一篇css設置密碼代碼
下一篇css怎么使盒子放在右邊