卡卡網(wǎng)

我們經(jīng)常在網(wǎng)頁上看到各種有意思的小三角形箭頭，尤其是在菜單欄目上。今天我介紹如何使用CSS偽元素:before和:after實現(xiàn)各種方向及大小的三角形箭頭。

效果圖

demodownload

實例介紹

在一段文字后面加上一個小三角形。

HTML代碼

<div class="demo">這里是卡卡測速網(wǎng)</div>

通過類class="demo"，在這div后面加上一個小三角形。

CSS代碼

.demo:after{
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-left: 10px solid #AFABAB;
  position: relative;
  top: 2px;
  left: 10px;
}

偽元素:after通過設(shè)置幾個屬性：border、border-left等，畫出三角形。

如果border-left改為border-right、border-top、border-bottom，將畫出不同方向的三角形，而這個屬性的值10px，則可設(shè)置三角形的寬度。

border屬性，8px，是三角形的高度，我們可以更改該數(shù)值設(shè)置三角形的高度。

CSS偽元素:after若用:before代替，則三角形將出現(xiàn)在div容器的前面。

總結(jié)

本文介紹了CSS偽元素:before和:after實現(xiàn)各種方向及大小的三角形箭頭，代碼很少，但很實用。

相關(guān)文章

• CSS隱藏元素的10種方法之：使用::after偽元素
• 弄清這兩點，你就知道偽元素與偽類的不同及使用區(qū)別了
• 純CSS偽元素創(chuàng)建的84個小圖標
• 漂亮的偽元素CSS按鈕5個實例代碼

標簽: 偽元素  after偽元素  before偽元素