利用 before after 寫小三角形

2021-07-16 02:48:56 字數 873 閱讀 3545

之前寫的三角形一直在同乙個顏色,沒有邊框的樣式。如下:

css**如下:

.tri-up

.tri-left

.tri-right

.tri-down

若要寫以下的小三角,則需要用到偽類:before :after

#demo  //方框的樣式

#demo

:after, #demo

:before

#demo

:after //此處是乙個白色的三角

#demo

:before 此處是乙個黑色的三角

//當#demo:after和#demo:before的樣式重合以後,由於top值的大小不同,就可以得到中間是白色,但是邊框的三角形。如上圖。

id="demo">div>

若要改為下圖的樣式:

則css**如下:

#demo

#demo

:after, #demo

:before

#demo

:after

#demo

:before

小挖掘 偽類 before after

before和 after的作用就是在指定的元素內容 而不是元素本身 之前或者之後插入乙個包含content屬性指定內容的行內元素,最基本的用法如下 ex before ex after 這段 會在 ex元素內容之前插入乙個 以及在內容之後新增乙個 插入的行內元素是作為 ex的子元素,效果如下 如果...

寫文件小總結

最近因為接了兩三個專案,都又是到了要交接的時間了,大家都要寫文件,其實我以前對寫文件的見識不清晰,不懂得如何真正的寫好文件,經過這幾天的磨鍊,真是學到了不少呀。軟體文件 document 也稱檔案,通常是指的是一些記錄的資料和資料 它具有固定不變的形式,可被任何計算機閱讀。在軟體工程中,文件常常用來...

寫程式碼小技巧!

相信會點進來的,都是想看看對你能有多少幫助吧?恭喜你被騙了 誤 其實做很多事情都一樣,有些人就是有天分,而大部分人則要靠後天。我也是後者,這邊提供幾個小技巧,提供各位參考。先思考程式架構,要怎麼完成,需要懂那些東西等等的。這個比較天馬行空,需要自己多思考 將要寫的功能做區塊化,簡單來說就是分成幾段程...