使用html css實現三角標示符號

2022-07-08 07:18:11 字數 750 閱讀 4571

我們平常開啟某個**的時候,常常會發現網頁上很多導航或者指示條會使用乙個三角符號去指向內容,效果簡潔美觀,甚至很多前端面試中也會提及如何在網頁上實現乙個三角符號,這裡給出乙個很簡單使用的實現方式。

**(注意到右邊那個三角符號)

網易(導航條三角符號應用)

這種例子多不勝數,此處不一一舉例了。下面說如何實現:

實現方式實際上很簡單,主要利用了偽元素和定位來完成:

**如下:

()

這裡首先定義乙個div,給它加上乙個class叫做div1,主要是用來給它自身定義背景,寬高,並且需要加上相對定位,因為它裡面的三角符號需要在它的基礎上進行絕對定位;

在這個div1 class上面加乙個before或者after的偽元素,這個就是三角符號,主要利用了它的border屬性,定義三個border,讓border-left和border-right透明,讓border-top(或border-bottom)非透明,取決於你想將這個三角符號設定成什麼顏色。

最後需要給這個三角符號進行絕對定位,如果你要將它放在這個div的最下面,可以設定bottom:0,如果你要做乙個導航類的三角讓它在div頂部並指向某元素,可以採用負的top值進行實現,其為負的border的寬度,就可以讓它和div連在一起。

同時,要設定這個偽元素寬高為0,內容為空,剩下的工作就是調整它的位置了,效果如下:

如何使用HTML CSS畫三角形

如何使用html css畫三角形,今天又有小姐姐在群裡問css是如何畫出三角形的,讓我想起一開始在學校學html css的時候,覺得學這些標籤樣式很無趣,認為不過是一些文字 css畫三角形我之前也有研究過,但是記憶總是不深刻,再次用到時,仍然需要找資料,今天加深一下印象,希望以後再用到的時候,可以從...

楊輝三角實現

楊輝三角是二項式係數在三角形中的一種幾何排列,最早是由楊輝在 詳解九章演算法 提出的,比國外要早了393年。著名的數學問題比如兔子生小兔子 斐波那契數列 猴子吃桃子 每天吃一半多乙個,最後還剩乙個 氣泡排序等等。下面試著用c來實現楊輝三角 怎麼實現它呢?include void main for i...

html css寫三角形(2)

首先我們來看下面一段 在頁面中的效果圖 看到這個效果圖,我們就大概知道三角形怎麼寫了,我們可以將border bottom設為none這樣方塊的下半邊就沒有了 border top none 效果圖如下 然後我們在將border left 和 border right的顏色設為透明,這樣就只剩bor...