CSS上三角是一種常見的圖形樣式,可以用于各種設計場景中,比如下拉菜單、面包屑導航等。在CSS中,我們可以使用:after來實現一個三角形。
/* 創建一個空元素 */ .element { position: relative; } .element:after { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -5px; /* 設置三角位置 */ border-top: 5px solid #000; /* 點是透明的,只顯示邊框 */ border-left: 5px solid transparent; border-right: 5px solid transparent; }
上面的代碼可以在指定元素的下方創建一個黑色的向上三角。其中:after偽元素的content屬性設置為空,讓它成為一個空元素,位置設置在指定元素的下方。然后使用border來畫出三角形,左右兩邊使用透明顏色的邊框表示不存在,只顯示上邊框。
如果我們想要改變三角形的顏色和大小,只要修改border屬性的值即可。比如改變大小為8px,顏色為紅色, 修改后的代碼如下:
.element:after { content: ""; position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -8px; /* 設置三角位置 */ border-top: 8px solid red; /* 點是透明的,只顯示邊框 */ border-left: 8px solid transparent; border-right: 8px solid transparent; }
通過上面的方法,我們可以輕松地實現各種不同風格的三角形。更多高級技巧和樣式也可參考CSS3中的:after偽元素。
上一篇css 上下左右 圓