Css after偽元素 簡單 寫對話方塊箭頭

2021-08-29 18:22:25 字數 536 閱讀 3034

第一次寫對話方塊的箭頭時,也是一頭霧水,不知道怎麼去寫,後來去學習了一下別人怎麼寫的,也曾經試過去用別人的**,但是去修改箭頭長度和寬度的時候總是很難,然後就自己去研究,發現了一種全新的寫法,自我感覺還是挺簡單的,最重要的是這樣寫可以去控制箭頭的長短和寬度,這樣在其他地方用的時候,也更加容易修改。

先是乙個隨意的 div ,可以根據自己的需要加在自己想樣用到的地方,然後通過他的偽類:after新增content,三角形的形狀是通過它的四個方向的邊框去實現的,其中三個方向的邊框設定顏色為透明。

例如我這個是向下的箭頭,可以通過border-left和border-right的寬度來改變箭頭的寬度,左右兩個邊框的寬度差可以去控制箭頭的偏向,向下的箭頭,就設定boorder-bottom的寬度為0,通過border-top的邊框寬度去改變箭頭的長短。最後通過定位把它放在div的下面就行了。

下面是效果圖:

Css after偽元素 簡單 寫對話方塊箭頭

第一次寫對話方塊的箭頭時,也是一頭霧水,不知道怎麼去寫,後來去學習了一下別人怎麼寫的,也曾經試過去用別人的 但是去修改箭頭長度和寬度的時候總是很難,然後就自己去研究,發現了一種全新的寫法,自我感覺還是挺簡單的,最重要的是這樣寫可以去控制箭頭的長短和寬度,這樣在其他地方用的時候,也更加容易修改。先是乙...

對html標籤 元素 以及css偽類和偽元素的理解

標籤 這應該都知道。等都是標籤。元素 標籤開始到結束。比如 p之間的內容 紅色部分就是元素。元素的內容 標籤開始到結束之間的部分,上述紅色部分中的 p之間的內容 這就是元素的內容。偽類 針對的是特殊狀態的元素。偽元素 針對的是元素的內容。比較偽類和偽元素 這裡用偽類 first child和偽元素 ...

偽元素寫導航欄底部劃標

在寫頁面的時候應該會遇到導航欄active的那個的那個小條 哎哎上圖上圖 這裡是拿的bootstrap上的例子 平常寫的時候就是 這些 li 的border bottom寫就行 但是根據頁面的樣式來設計的這個下標會不美觀 設計會偶爾發下來的導航的下標就是要求是 都是一樣的 不管你的每一項為多寬 類似...