CSS三角形是網(wǎng)頁設(shè)計(jì)中常用的一種圖形效果,可以用于制作導(dǎo)航欄、展示框等。而有時候,我們需要在三角形內(nèi)部加入數(shù)字,比如制作數(shù)字角標(biāo)。下面是一個簡單的實(shí)現(xiàn)方法。
.triangle{ width: 0; height: 0; border-top: 30px solid #ffcc00; border-right: 30px solid transparent; border-left: 30px solid transparent; position: relative; } .triangle:before{ content: "1"; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; }
上面的代碼中,我們首先定義了一個三角形的樣式。三角形的寬度和高度都為0,通過調(diào)整border的樣式來讓其顯示出來。同時,為了能夠讓數(shù)字顯示在三角形的中心位置,我們需要給三角形添加position:relative屬性,同時在其:before偽元素中定義數(shù)字的樣式,使其居中顯示。
以上代碼僅作為簡單的示例,實(shí)際中可以通過添加其他樣式實(shí)現(xiàn)更精細(xì)的效果。比如,可以為三角形添加背景色、陰影、圓角等。同時也可以通過修改三角形的大小、border樣式等來滿足不同的需求。
上一篇css上div一直在底部
下一篇css上一層顯示