（中級）用CSS人造三角形

李鬆峰發表於2012-12-10
CSS

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第6章“介面元件”。

現在，我在考慮怎麼讓彈出層和圖片的關係更加明確。嗯，可以給彈出層左邊新增一個三角箭頭，讓它指向圖片。這就涉及利用盒子三角形對接的邊框來建立三角形了。下面我用一個div來演示這個技術。

enter image description here
圖6-23 使用寬邊框建立三角形

以下是圖6-23所示效果的程式碼。

div {
    border:12px solid;
    border-color:transparent red transparent transparent;
    height:0px;
    width:0px;
}

如圖6-23所示，通過加寬盒子的邊框，將盒子的寬和高都設定為0，同時將其他三個邊框設定為transparent，就可以用CSS造出一個三角形。現在，我把這個技術與::before偽元素結合起來。大家知道，::before和::after這兩個偽元素是用於新增文字或圖示等少量內容的。不過，完全可以為它們生成的內容設定任何樣式，就像給標記中其他元素設定樣式一樣。在這個例子中，就是要把偽元素生成內容的盒子，通過CSS製作成一個三角形，並把它放到彈出層的左邊。

figcaption::after { /*紅色三角形的盒子*/
    content:""; /*需要有內容，這裡是一個空字串*/
    position:absolute; /*相對於彈出層定位*/
    border:12px solid; 
    border-color:transparent red transparent transparent;
    right:100%; top:17px; /*相對於盒子邊框定位三角形*/
    height:0px; width:0px; /*收縮邊框創造三角形*/
}

enter image description here
圖6-24 一個小三角形，就從視覺上把彈出層和相關圖片聯絡起來了

好了，程式碼生成的三角形已經被絕對定位到了彈出層左側，而彈出層本身又相對於圖片定位，如圖6-24所示。這麼20來行CSS，就能顯示無數個圖片的彈出層！ 誰說程式設計沒有創造性來著？要注意的是，::before偽元素的content屬性中必須有點內容，否則就不能顯示生成的元素。因為我們並不真需要什麼內容，所以就用一對雙引號指定了一個空字串給它。這個練習好玩吧？肯定比表單好玩多了，是不是？

相關文章