>[danger]不使用圖片給div加個箭頭 ---- > 利用before和after偽類, 形成2個三角形摞在一起 ---- 先看效果, 前提, 你會用[CSS繪制三角形](CSS%E7%BB%98%E5%88%B6%E4%B8%89%E8%A7%92%E5%BD%A2.md), 還需要明白:before和:after偽類  1. 先來一個規矩的 ~~~ .main_content { position: relative; width: 150px; height: 36px; border: 1px solid black; border-radius: 5px; background: #eee; /*無實際作用, 為了讓左邊留出一點空隙, 觀察箭頭*/ margin-left: 50px; } ~~~  2. 添加:before偽類 ~~~ .main_content:before { content: ''; width: 0; height: 0; position: absolute; /*三角距離頂部距離*/ top: 8px; /*三角大小*/ border: 6px solid transparent; /*設置三角位置, 和三角的顏色*/ left: -12px; border-right-color: black; z-index: 0; } ~~~  3. 添加:after偽類, 再來個類似三角, 不過跟背景色一樣蓋在上面, 少蓋1px ~~~ .main_content:after{ content: ""; display: block; position: absolute; top: 8px; width: 0; height: 0; /*三角大小*/ border: 6px solid transparent; /*跟背景色一樣的, 注意left要少設置1px, 為了留出上面三角形一條黑邊*/ left: -11px; border-right-color: #eee; z-index: 1; } ~~~