究竟該用字體圖標(biāo)、圖片圖標(biāo)、還是CSS畫一個(gè)圖標(biāo)?我也不知道。各有千秋吧。本文將介紹如何用css繪制簡(jiǎn)單的圖形,所有測(cè)試在chrome58.0完成,如果你不能得到正確結(jié)果請(qǐng)到caniuse查一查看看是不是需要什么前綴。
一、基礎(chǔ)
<!DOCTYPE html><html><head> <title>basic shapes</title> <style type="text/css"> div{ box-sizing: border-box; } .div1{ width: 100px; height: 100px; border-top: 50px solid red; border-right: 50px solid blue; border-bottom: 50px solid yellow; border-left: 50px solid green; } .div2{ width: 100px; height: 100px; border-right: 50px solid blue; border-bottom: 100px solid yellow; border-left: 50px solid green; } &