、實現三角形

#top-triangle {
        width: 0px;
        height: 0px;
        border: 20px solid transparent;
        border-bottom: 20px solid pink;
      }
      #right-triangle {
        width: 0px;
        height: 0px;
        border: 20px solid transparent;
        border-left: 20px solid pink;
      }
      #bottom-triangle {
        width: 0px;
        height: 0px;
        border: 20px solid transparent;
        border-top: 20px solid pink;
      }
      #left-triangle {
        width: 0px;
        height: 0px;
        border: 20px solid transparent;
        border-right: 20px solid pink;
      }

 <div id="top-triangle"></div>
    <p></p>
    <div id="bottom-triangle"></div>
    <p></p>
    <div id="right-triangle"></div>
    <p></p>
    <div id="left-triangle"></div>
    <p></p>

效果預覽

2、實現對話框

.left,
      .right {
        position: relative; /*后面移動會盒子位置*/
        display: table;
        min-height: 40px;
        text-align: center;
        background-color: #9eea6a;
        margin: 0;
        border-radius: 7px;
      }
      .left {
        left: 10px;
      }
      .left::before,
      .right::after {
        position: absolute;
        display: inline-block;
        content: "";
        width: 0px;
        height: 0px;
        border: 8px solid transparent;
        top: 15px; /*移到中間*/
      }
      .left::before {
        border-right-color: #9eea6a;
        left: -16px;
      }
      .right::after {
        border-left-color: #9eea6a;
        right: -16px;
      }
      .left p,
      .right p {
        padding: 0px 10px;
      }
      .right {
        right: -150px;
      }

<div class="left">
      <p>你好啊</p>
    </div>
    <div class="right">
      <p>好久不見~</p>
    </div>

3、實現箭頭

.box {
        position: relative;
        width: 200px;
        height: 50px;
        background-color: pink;
      }
      .box::before {
        position: absolute;
        content: "";
        width: 12px;
        height: 12px;
        border: 1px solid black;
        border-bottom-color: transparent;
        border-right-color: transparent;
        transform: translate(-50%, -50%) rotate(-45deg);
        left: 20px;
        top: 50%;
      }

<div class="box"></div>

4、分割線

* {
      padding: 0;
      margin: 0;
    }
    .spliter::before, .spliter::after {
      content: '';
      display: inline-block;
      border-top: 1px solid black;
      width: 200px;
      margin: 5px;
    }

<p class="spliter">分割線</p>

CSS（層疊樣式表）中，偽類（pseudo-class）和偽元素（pseudo-element）是用于選擇特定元素或元素狀態的機制。它們允許你再不修改 HTML 結構的情況下，通過樣式來修改元素的外觀和行為。雖然它們看起來相似，但實際上有一些區別。

偽類（Pseudo-classes）：

偽類是用于選擇元素的特定狀態或行為的標識。它們以冒號（:）開頭，用于在選擇器中指定元素的狀態。常見的偽類包括 :hover（鼠標懸停時）、:active（被激活時）、:focus（獲得焦點時）、:nth-child（選擇特定子元素序號）等。

示例：

a:hover {

color: blue; /* 當鼠標懸停在鏈接上時改變顏色 */

}

偽元素（Pseudo-elements）：

偽元素用于選擇元素的特定部分，例如元素的內容、邊框等。它們以雙冒號（::）開頭，用于在選擇器中創建一個虛擬的元素，以便對其應用樣式。常見的偽元素包括 ::before（在元素內容前插入內容）、::after（在元素內容后插入內容）、::first-line（選擇第一行文本）等。

示例：

p::before {

content: ">> "; /* 在段落前插入內容 */

}

區別：

1.語法差異：偽類以單冒號開頭（例如 :hover），而偽元素以雙冒號開頭（例如 ::before）。然而，在某些情況下，一些早期版本的偽元素也可以使用單冒號。

2.應用范圍：偽類選擇元素的特定狀態或行為，而偽元素選擇元素的特定部分或生成虛擬元素。

3.瀏覽器兼容性：某些較舊的瀏覽器可能不支持某些偽元素或偽類。因此，在使用時需要考慮瀏覽器兼容性。

總之，偽類和偽元素為開發者提供了更多的樣式控制和靈活性，使得可以針對特定情況下的元素狀態和結構進行樣式化處理。