具有特定形狀的div

Question

我需要創建一個水平導航欄，其形狀與此「鏈接」中的「團隊」和「合作」div類似。是否存在一個圖書館？ LINK

Answer 1

本網站使用背景圖像來實現的外觀，更具體而言，它使用稱爲spriting（或CSS子畫面）的技術。

該技術本質上只是使用一個包含多個圖像的圖像，每個圖像單獨使用。通過background-position規則可以使用單個圖像，該規則允許您從中選取要使用的大圖像的哪一部分。該技術的主要目的是減少HTTP請求的數量，以加快頁面的加載速度。

請參閱http://css-tricks.com/css-sprites/以獲得更好的解釋。

這裏是你鏈接到他們的網站上使用的精靈：

http://hitmo-studio.com/images/sprites-set-1.png

你可以看到整個子畫面圖像的頂部的四個框。以下是第二個方塊（團隊）如何使用精靈圖像的正確部分的示例：

.list-c li.team a { 
background-position: -246px 0; 
} 

Answer 2

你不需要這個庫，它只是CSS。

在您鏈接到網站的頁面上，似乎使用image sprite作爲背景圖像來創建扭曲（插入/起始三角形）形狀的錯覺，但可以使用可以處理的兼容瀏覽器::before和::after僞元素：

.box { 
    width: 150px; /* or whatever */ 
    height: 150px; 
    background-color: #f90; /* adjust to your taste */ 
    padding: 0.5em; 
    position: relative; /* required to position the pseudo elements */ 
    margin: 0 auto; /* used to move the box off the edge of the page, adjust to taste */ 
} 

.box::before { 
    content: ''; /* required in order for the ::before to be visible on the page */ 
    position: absolute; 
    top: 50%; 
    left: 0; 
    margin: -25px 0 0 0; /* to position it vertically centred */ 
    border-right: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-top: 25px solid transparent; 
    border-left: 25px solid #fff; /* forms the triangular shape on the left */ 
} 

.box::after{ 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: 0; 
    margin: -25px -50px 0 0; 
    border-right: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
    border-top: 25px solid transparent; 
    border-left: 25px solid #f90; 
}​ 

JS Fiddle demo。

注意是否有使用這種方法的問題：

1. 頁面的背景無法通過左側的三角形顯示（因爲它是一個純白色），如果你作出這樣的三角transparent然後您將看到邊框，但只看到.boxdiv元素的背景顏色。

2. 定位的::before和::after僞元素與position: absolute意味着這些元素出現在div文本的上方。因此，您可能需要調整div的padding和border-width的僞元素以減少這個問題，這只是一個演示。