想知道如何利用CSS來製作圖示嗎？並且只使用一個標籤的情況下，不能使用偽元素哦！
在利用CSS製作圖示時，經常用到border邊框，所以，先看看邊框的相關知識。
1.藏在border中的不能說的祕密
<style>
.box{
width:100px;
height:100px;
border-top:10px solid red;
border-right:10px solid blue;
border-bottom:10px solid yellow;
border-left:10px solid green;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：
從執行結果可以看出，每個邊框是個梯形，那麼我們把寬度和高度都設定為0，會怎麼樣吶？
從上圖中，可以看出，四個邊框都變成了三角形，那麼如果將左，右，下的邊框都設定為透明(transparent)，那麼就顯示了一個下三角。
在使用邊框的問題上，我們也遇到過一些問題，例如：
從上圖可以發現，第二個選單和第三個選單的左邊框不正確，其原因是，前一個元素的右邊框和後一個元素的左邊框疊加在了一起。想要解決這個問題，很簡單，把後面兩個元素的左邊框去掉或者設定它們的margin-left為負值即可。
<style>
*{
margin:0;
padding:0;
}
li{
list-style:none;
}
ul li{
float:left;
width:100px;
height:35px;
line-height:35px;
text-align:center;
margin:100px auto;
border:4px solid #dedede;
}
ul li ~ li{
/*border-left:none;*/
margin-left:-4px;
}
</style>
<body>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>Javascript</li>
</ul>
</body>
複製程式碼執行效果，如下所示：
2.一個和邊框很像的屬性outline
可以用它來繪製元素的輪廓，並且不佔空間。
<style>
.box{
width:100px;
height:100px;
line-height:100px;
margin:100px auto;
text-align:center;
background:red;
outline:1px solid #dedede;
}
</style>
<body>
<div class="box">outline</div>
</body>
複製程式碼猜一猜，這個div的寬度和高度是多少吶？
使用outline屬性可以很好的解決了，當滑鼠移動到某元素上時，動態新增邊框帶來的抖動問題。
<style>
.box{
width:100px;
height:100px;
line-height:100px;
margin:100px auto;
text-align:center;
background:red;
}
.box:hover{
outline:4px solid #dedede;
}
</style>
<body>
<div class="box">outline</div>
</body>
複製程式碼執行結果如下：
值得注意的是，border-radius不會作用在outline上。
<style>
.box{
width:100px;
height:100px;
line-height:100px;
margin:100px auto;
text-align:center;
background-color:red;
outline:5px solid #dedede;
border-radius:20px;
}
</style>
<body>
<div class="box">outline</div>
</body>
複製程式碼執行結果如下：
如果想不佔空間，還想使用border-radius怎麼辦吶？
<style>
.box{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background-color:red;
border:10px solid #dedede;
border-radius:20px;
box-sizing:border-box;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼還可以利用box-shadow屬性：
<style>
.box{
width:100px;
height:100px;
line-height:100px;
text-align:center;
background-color:red;
box-shadow:0 0 0 10px #dedede;
border-radius:10px;
margin:10px;
}
</style>
<body>
<div class="box">box-shadow</div>
</body>
複製程式碼執行結果如下：
box-shadow：x軸偏移 y軸偏移 陰影大小 邊框大小 填充顏色，利用此屬性，可以很好的模擬邊框，還不佔空間。
3.利用CSS製作圖示
(1) 平行四邊形圖示
<style>
.box{
width:50px;
height:50px;
background:red;
transform:skew(-25deg);
margin-left:100px;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：
(2) 暫停按鈕
暫停按鈕的原理是利用邊框border，裡面的方形用outline，再利用outline-offset屬性可以用來設定偏移，並且是按照比例來的。
<style>
.box{
width:50px;
height:50px;
color:#000;
border:1px solid #000;
cursor:pointer;
border-radius:50%;
outline:10px solid #000;
outline-offset:-26px;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：
如果將outline-offset再設定小一點，就出現了一個+號。
如果再修改一些屬性和新增一些屬性，就會出現如下的圖示：
<style>
.box{
width:50px;
height:50px;
background-color:#000;
border:1px solid #000;
cursor:pointer;
border-radius:50%;
outline:10px solid #fff;
outline-offset:-35px;
transform:rotate(45deg);
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼(3) 梯形圖示
<style>
.box{
width:35px;
border:50px solid transparent;
border-bottom:50px solid red;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：
(4) 鷹嘴圖示
<style>
.box{
width:35px;
border-top:50px solid transparent;
border-right:22px solid #096;
border-bottom-right-radius:100%;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：
(5) 左右箭頭圖示
<style>
.box{
width:0;
height:0;
border:10px solid transparent;
border-left:10px solid red;
-webkit-box-reflect: left 5px;
box-reflect:left 5px;
margin-left:100px;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：
值得注意的是，box-reflect屬性具有相容性問題，只能在Chrome瀏覽器中開啟。
(6) 下載圖示
<style>
.box{
width:0;
color:blue;
border:8px solid transparent;
border-top:8px solid blue;
box-shadow:0 -12px 0 -4px;
}
</style>
<body>
<div class="box"></div>
</body>
複製程式碼執行結果如下：