css 畫小箭頭、小三角、聊天框

阿新 • • 發佈：2021-02-01

技術標籤：css css html

前言

在寫一個頁面的時候，需要用到箭頭：
在這裡插入圖片描述

類似這種小箭頭，小三角形什麼的，是不用UI提供圖片的，直接用css 畫一個更好，不但能減少一次請求，對瀏覽器的渲染也更好。
突然發現這個小三角小箭頭不管是實際開發中還是面試中都是比較常見的(我就有被問到過)，有鑑於此，遂寫一篇來總結一下。

小箭頭

原理
通過border來實現，border有四個邊，去掉兩個邊就是個箭頭，箭頭指向可以通過rotate來改變。
當然，除了這個方法也有其他的方法，比如background，兩個元素設定background，然後通過定位組成一個箭頭也可以。相比較來說，border是更容易實現的，市面上主流的也是通過border來實現，通過border來實現，可以新增一個元素，然後設定元素的border，也可以通過偽元素實現，這樣就省去了瀏覽器再渲染一個節點。至於如何選擇，根據實際開發(或者個人喜好)決定，一般來說，如果是生成之後不再對其進行更改的，我會選擇偽元素，而如果後期需要更改的，比如更改箭頭方向的，我會選擇元素，這樣比較好控制。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 元素 */
    div {
      border: 5px solid #000; 

      width: 100px;
      height: 100px;
      border-left: none;
      border-bottom: none;
      transform: rotate(45deg);
    }
    /* 偽元素 */
    body::after {
      content: '';
      display: block;
      width: 100px;
      height: 100px;
      border-top: 5px solid red;
      border-right: 5px solid red; 

      transform: rotate(45deg);
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在這裡插入圖片描述

小三角

原理
也是和小箭頭一樣，利用border。也同樣可以用元素或為元素。
先來看下如何實現：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 元素 */
    div {
      width: 0px;
      height: 0px;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid blue;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

在這裡插入圖片描述

為什麼會這樣呢？我們把div的寬高補上：

<style>
    /* 元素 */
    div {
      width: 100px;
      height: 100px;
      border-top: 50px solid red;
      border-left: 50px solid green;
      border-bottom: 50px solid blue;
      border-right: 50px solid orange;
    }
  </style>

在這裡插入圖片描述
這時候我們會發現，原來border不是一條線，它是個梯形。那麼當div的寬高越來越小直至為零的時候，會發生什麼？

<style>
    /* 元素 */
    div {
      width: 0px;
      height: 0px;
      border-top: 50px solid red;
      border-left: 50px solid green;
      border-bottom: 50px solid blue;
      border-right: 50px solid orange;
    }
  </style>

在這裡插入圖片描述
會出現四個三角形，把其他三個隱去，就畫出一個三角形了

<style>
    /* 元素 */
    div {
      width: 0px;
      height: 0px;
      border-top: 50px solid transparent;
      border-left: 50px solid transparent;
      border-bottom: 50px solid blue;
      border-right: 50px solid transparent;
    }
  </style>

在這裡插入圖片描述

如果想它更尖銳一點，那麼就增加bottom的大小就行

<style>
    /* 元素 */
    div {
      width: 0px;
      height: 0px;
      border-left: 50px solid transparent;
      border-bottom: 100px solid blue;
      border-right: 50px solid transparent;
    }
  </style>

在這裡插入圖片描述
所以說，這裡的bottom的大小，並不是增加它的長度，而是增加他的寬度，即底部距離中心點的距離。
偽元素實現其實也是同樣的道理，只是不用在頁面上增加一個標籤而已。

<style>
    /* 偽元素 */
    body::after {
      content: '';
      display: block;
      width: 0px;
      height: 0px;
      border-bottom: 100px solid blue;
      border-right: 50px solid transparent;
      border-left: 50px solid transparent;
    }
  </style>

在這裡插入圖片描述

聊天框

有時候，我們可能還需要實現如微信聊天框那樣的效果。
這要怎麼實現呢？觀察一下聊天框就可以發現，就是已給矩形加一個小三角。我們來動手試試：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 首先畫個矩形 */
    div {
      color: white;
      width: 200px;
      min-height: 50px;
      background-color: black;
      border-radius: 10px;
      position: relative;
    }
    /* 然後新增小三角, 小三角的形狀可以通過修改border的寬度實現 */
    div::after {
      content: '';
      display: block;
      width: 0;
      height: 0;
      border-left: 30px solid black;
      border-top: 20px solid transparent;
      border-bottom: 5px solid transparent;
      position: absolute;
      /* 因為有個10px的圓角，所以這裡距離頂部10px */
      top: 10px;
      right: -30px;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>