首頁 > 開發者 > JavaScript
[CSS]利用虛擬元素實現一些特殊圖形 from baidu校招，css
最近在部落格園看到某人發的baidu校招題目，說是要用一行html代碼實現下面的這個圖形：
給定的html代碼是： <div class='square'></div>
-----------------------以上為背景------------------------------
正方形當然很好做，但是右側突出來的小角標就得自己想辦法了。所以，既然沒有到有，自然是用上了CSS中的虛擬元素。
這個形狀跟我們平時經常遇到的小氣泡和下拉欄差不多
平常實現我們常是通過添加小的icon來實現，不僅需要添加圖片資源，還需要改動html結構。
CSS虛擬元素
css中虛擬元素有四個，分別是:first-line,:first-letter,:before,:after。其中前兩個分別選擇的是目標元素內第一行文本和第一個字母，可以為其添加多餘樣式。
而最常用的就是:before和:after，這兩個虛擬元素與前兩個的用法不同，而用處也更大。
:before,:after分別用於向當前元素前和後添加指定的content內容，具體案例用法如下：
<!doctype html><html><head><meta charset="utf-8"><title>CSS輸出各種圖形</title><style type="text/css"> p:before{ content:"開始"; color:#F00; font-size:12px; } p:after{ content:"結束"; color:#003; font-size:30px; border:1px solid #000; width:100px; }</style></head><body> <p>虛擬元素 測試</p></body></html>
上面代碼的運行結果
可以認為:before和:after兩個虛擬元素是添加到當前p標籤前後的兩個元素，但是應該也會發現在p:after中寫的width:100px;並沒有奏效，這就說明了虛擬元素的顯示是inline的，而不是block。
至於虛擬元素有幾個需要注意的地方：
1.虛擬元素在元素內部的顯示為inline，因此想要用虛擬元素實現更多效果，比如上面的題目，就必須把虛擬元素當做block元素來用。
2.虛擬元素列表屬性中content必不可少，即使內容為空白，content也不可為空，否則會不顯示。
3.虛擬元素content除了可以設定為文字之外，還可以設定為圖片，例如p:before{content:url(icon.gif);}
4.虛擬元素目前已經得到IE8及以上瀏覽器，可以放心使用。
用CSS做出來一個三角形或者別的形狀
掌握了虛擬元素之後，就可以實現上面的題目了。很明顯，是通過虛擬元素做出了一個三角形。怎麼做呢？
用CSS代碼實現三角形很簡單，嘗試一下就可以寫出來：，html代碼為<div class="triangle"></div>, css代碼如下
.trangle{width:0;height:0;border:40px solid; border-color:transparent transparent transparent #F00;}
別的形狀也是大同小異，通過設定不同的border-radius和border-width來實現，但是相容性有問題，IE9及以上才會正常（自然是border-radius的問題）。
但是可以看出來元素已經是用border勾勒出來的了，但是題目中的三角形是帶有黑色邊框的，很明顯不能通過一個虛擬元素來搞定，那就兩個一起。
通過設定虛擬元素的position:absolute和z-index屬性，構成虛擬元素的疊加，底層是黑色，上層是白色即可。
原題目的CSS具體實現代碼如下：
.square{width:100px;height:100px;background-color:#FFF;position:relative;border:2px #000000 solid;}.square:before{content:"";width:0px;height:0px;display:block;position:absolute;z-index:2;top:25%;right:-28px;border:15px solid #FFF;border-color:transparent transparent transparent #FFF;}.square:after{content:"";width:0px;height:0px;display:block;position:absolute;z-index:1;top:25%;right:-30px;border:15px solid #FFF;border-color:transparent transparent transparent #000;}
當然，也可以實現一些更複雜的圖形，比如下面兩個：（左邊的太極是，右邊的百事是寫著測試的）
太極： 百事Logo: IE8下的百事Logo(23333):
恩，就是這樣，具體怎麼用，見仁見智了。
---------------------------結束了---------------------------------
到了大三課也少了，外包也少了，沒事看點書、寫點好玩的，一邊準備明年實習校招，一邊當鞏固基礎了。
作用主要是利用虛擬元素裝飾內容 (無論是裝飾圖片還是音效) 而不需要更改 HTML 的內容，從而協助內容與樣式更好地分離。因為如果僅僅為了畫一個裝飾用的三角就在 HTML 裡多加一個元素，這上對於實際內容來說其實是多餘的，對自動分析網頁的語義也可能會產生不好的影響 (這取決於剖析器的具體實現)。
應該說，::before 和 ::after 虛擬元素的初衷還是用於插入內容——不受文檔約束，也不影響文檔本身（比如，不影響 DOM），隻影響最終的樣式。
CSS 規範中給的例子很典型：p.note:before { content: "Note: " } ——這種插入的內容本身其實不是真正的內容，其實是身為文本的樣式，所以沒必要在 HTML 中重複出現，交給 CSS 來產生會很不錯。
不過目前最多見的應用情形的確是把它們用成 content: "" 這樣的空元素，然後給這個空元素加上各種樣式。這樣來說利用的就只是它這個元素的「存在」了（而非元素的內容），已經是討巧的 hacking 了。
怎用HTML與Css實現這個圖片
1.先定義1個<DIV></DIV>,最好給它設定1個ID號,需要在CSS中設定寬度和高度
2.商品分類,和全部分類是1個帶有漸層色的圖片,可以在CSS中設定圖片為上述DIV的背景,頂端對齊.
3.家用電器 書籍 手機數位 日用百貨 這4個可以使用<H1></H1>標籤,再在CSS中定義它的字的顏色(黃)和背景色.(淺灰)
4.每個分類下面的具體品種可以使用<UL><LI></LI></UL>標籤,
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
