純css寫(xiě)箭頭

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
  <title>CSS 箭頭Demo</title>
  <style type="text/css">
    /* 向上的箭頭,類(lèi)似于A,只有三個(gè)邊，不能指定上邊框 */

    div.arrow-up {
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      /* 左邊框的寬 */
      border-right: 5px solid transparent;
      /* 右邊框的寬 */
      border-bottom: 5px solid #2f2f2f;
      /* 下邊框的長(zhǎng)度|高,以及背景色 */
      font-size: 0;
      line-height: 0;
    }
    /* 向下的箭頭 類(lèi)似于 V */

    div.arrow-down {
      width: 0;
      height: 0;
      border-left: 20px solid transparent;
      border-right: 20px solid transparent;
      border-top: 20px solid #f00;
      font-size: 0;
      line-height: 0;
    }
    /* 向左的箭頭: 只有三個(gè)邊：上、下、右。而 <| 總體來(lái)看，向左三角形的高=上+下邊框的長(zhǎng)度。 寬=右邊框的長(zhǎng)度 */

    div.arrow-left {
      width: 0;
      height: 0;
      border-bottom: 15px solid transparent;
      /* 下邊框的高 */
      border-top: 15px solid transparent;
      /* 上方邊框的高 */
      border-right: 10px solid yellow;
      /* 右邊框的長(zhǎng)度|寬度，以及背景色 */
      font-size: 0;
      line-height: 0;
    }
    /* 向右的箭頭: 只有三個(gè)邊：上、下、左。而 |> 總體來(lái)看，向右三角形的高=上+下邊框的長(zhǎng)度。 寬=左邊框的長(zhǎng)度 */

    div.arrow-right {
      width: 0;
      height: 0;
      border-bottom: 15px solid transparent;
      /* 下邊框的高 */
      border-top: 15px solid transparent;
      /* 上方邊框的高 */
      border-left: 60px solid green;
      /* 左邊框的長(zhǎng)度|寬度，以及背景色 */
      font-size: 0;
      line-height: 0;
    }
    /* 基本樣式 */

    .tip {
      background: #eee;
      border: 1px solid #ccc;
      padding: 10px;
      border-radius: 8px;
      box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
      position: relative;
      width: 200px;
    }
    /* 箭頭 - :before and :after, 一起組成了好看的氣泡小箭頭 */

    .tip:before {
      position: absolute;
      display: inline-block;
      border-top: 7px solid transparent;
      border-right: 7px solid #eee;
      border-bottom: 7px solid transparent;
      border-right-color: rgba(0, 0, 0, 0.2);
      left: -8px;
      top: 20px;
      content: '';
    }
    /* 背景陰影*/

    .tip:after {
      position: absolute;
      display: inline-block;
      border-top: 6px solid transparent;
      border-right: 6px solid #eee;
      border-bottom: 6px solid transparent;
      left: -6px;
      top: 21px;
      content: '';
    }
  </style>
</head>

<body>
  <div id="contentHolder">
    <h1>CSS 箭頭Demo</h1>
    <p>以下代碼.是極好的純 CSS 箭頭樣式，不使用背景圖!</p>
    <div id="position:relative;">
      <div class="arrow-up">向上的箭頭</div>

      <div class="arrow-down">向下的箭頭</div>

      <div class="arrow-left">向左的箭頭</div>

      <div class="arrow-right">向右的箭頭</div>
    </div>
    <h2>CSS 箭頭氣泡 ，使用 偽類(lèi)(Pseudo-Element)</h2>
    <div style="position:relative;">
      <div class="tip">
        企業(yè)級(jí)開(kāi)發(fā)首選技術(shù)是什么？JavaEE和.Net哪個(gè)技術(shù)更好？在JavaEE開(kāi)發(fā)中主要用哪些框架？另外在移動(dòng)大熱的趨勢(shì)下如何開(kāi)發(fā)出一個(gè)成功的Android產(chǎn)品？
      </div>
      <br/>
      <div class="tip">
        向左的箭頭: 只有三個(gè)邊：上、下、右。而
        < | 總體來(lái)看，向左三角形的高=上+下邊框的長(zhǎng)度。 寬=右邊框的長(zhǎng)度 向右的箭頭: 只有三個(gè)邊：上、下、左。而 |> 總體來(lái)看，向右三角形的高=上+下邊框的長(zhǎng)度。 寬=左邊框的長(zhǎng)度 向上的箭頭,類(lèi)似于A,只有三個(gè)邊，不能指定上邊框
      </div>
    </div>
  </div>
</body>

</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容