苦逼的前端工程師在做網(wǎng)站的時(shí)候，對(duì)以下這種設(shè)計(jì)圖，都不會(huì)太陌生。

對(duì)于，圖中 對(duì)勾 √ 圖形，該如何優(yōu)雅的解決這個(gè)問題？

1、切圖，切圖解決一切問題。老師都說(shuō)過，對(duì)于不規(guī)則圖形，就是 切切切。（這個(gè)都會(huì)就不用演示了）

當(dāng)我們能用一種方法解決問題后，就該考慮是否還有更優(yōu)解。切圖的弊端也很明顯，即便你切的圖片再小。

對(duì)于前端 日漸 豐富的 頁(yè)面。圖片過多，也會(huì)給頁(yè)面加載帶來(lái)負(fù)擔(dān)。

2、用 已經(jīng)日漸成熟的 CSS3 解決。具體怎么操作，繼續(xù)往下看。

 .feature i {
    width: 14px;
    height: 6px;
    display: inline-block;
    border: 1px solid #23b8ff;
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg);
    vertical-align: baseline;
}

簡(jiǎn)單解析：重點(diǎn)代碼 就兩行，在上方已經(jīng)標(biāo)注。

1、先畫一個(gè)帶表框的長(zhǎng)方形。

2、再設(shè)置把它的上邊框，右邊框設(shè)置為零。得到一個(gè) 形似 L 形狀的 圖形。

3、旋轉(zhuǎn)-45° 。OK完成了。

是不是感覺很簡(jiǎn)單？

by 不言謝

不要和別人比，要贏得是自己。(? ??_??)?

總結(jié)

以上是生活随笔為你收集整理的简单记录：如何用CSS3做出对勾 √ 的图形样式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。