《如何用純CSS實現的箭頭的效果？》要點：
本文介紹了如何用純CSS實現的箭頭的效果？，希望對您有用。如果有疑問，可以聯系我們。

相關主題：CSS2和CSS3特效

用CSS即可繪制出各種箭頭，無需裁剪圖片，甚至沒有用到CSS3的東西。對瀏覽器支持良好。

　　基本原理

　　原理非常簡單，通過截取border(邊框)的部分“拐角”實現，幾行CSS代碼即可理解：

　　一個梯形

　　當元素寬、高和邊框的寬相近（等）時，改變某一邊的顏色可以看到一個梯形；

<div id="demo11"></div>
<style>
       #demo11 {
              border: 10px solid #000;
              border-left-color: #f00;
              width: 10px;
              height: 10px;
       }
</style>

一個三角形

　　當元素寬、高為零，且其他邊為透明顏色時，可以形一個三角形。

<div id="demo12"></div>

<style>
       #demo12 {
              border: 10px solid #000;
              border-left-color: #f00;
              width: 0;
              height: 0;
       }
</style>

任意角度的三角形

　　改變各個邊的寬度，即通過調整“邊框”厚度可以配置出任意角度

<div id="demo14"></div>

<style>
       #demo14 {
              border: 10px solid transparent;
              border-left: 20px solid #f00;
              width: 0;
              height: 0px;
       }
</style>

通過偽元素實現

　　三角形可以通過偽元素繪制出，而無需改變原來的DOM結構

<span id="demo15">文字內容</span>

<style>
       #demo15{
              position: relative;
       }
       #demo15:after {
              border: 10px solid transparent;
              border-left: 10px solid #f00;
              width: 0;
              height: 0;
              position: absolute;
              content: ' '
       }
</style>

偽元素實現三角線箭頭

　　通過偽元素繪制出的兩個，一個與背景色相同覆蓋部分紅色箭頭，形成三角線

<span id="demo15">文字內容</span>

<style>
       #demo16{
              position: relative;
       }
       #demo16:after, #demo16:before {
              border: 10px solid transparent;
              border-left: 10px solid #fff;
              width: 0;
              height: 0;
              position: absolute;
              top: 0;
              right: -20px;
              content: ' '
       }

       #demo16:before {
              border-left-color: #f00;
              right: -21px;
       }
</style>

三角線分割的Tab頁

• 文字內容 Tab1

• 文字內容 Tab2

• 文字內容 Tab3

<ul id="demo17">
       <li>文字內容 Tab1</li>
       <li>文字內容 Tab2</li>
       <li>文字內容 Tab3</li>
</ul>

<style>
       #demo17{
              font-size: 10px;
              height: 24px;
       }

       #demo17 li {
              float: left;
              position: relative;
              list-style: none;
              margin: 0 20px 12px -19px;
              border-top: solid 1px #ddd;
              border-bottom: solid 1px #ddd;
              padding-left: 12px;
       }

       #demo17 li:after, #demo17 li:before {
              border: 10px solid transparent;
              border-left: 10px solid #fff;
              width: 0;
              height: 0;
              position: absolute;
              top: 0;
              right: -18px;
              content: ' '
       }

       #demo17 li:before {
              border-left-color: #ddd;
              right: -19px;
       }
</style>

三角形跟矩形組合成提示框

　　這里還有另一種效果，使用三角形跟矩形組合成提示框

<div id="demo"></div>

<style>
       #demo {
              width: 100px;
              height: 100px;
              background-color: #ccc;
              position: relative;
              border: 4px solid #333;
       }

       #demo:after, #demo:before {
              border: solid transparent;
              content: ' ';
              height: 0;
              left: 100%;
              position: absolute;
              width: 0;
       }

       #demo:after {
              border-width: 9px;
              border-left-color: #ccc;
              top: 15px;
       }

       #demo:before {
              border-width: 14px;
              border-left-color: #333;
              top: 10px;
       }
</style>

轉載請注明本頁網址：
http://www.snjht.com/jiaocheng/5.html