簡單記錄：如何用CSS3做出對勾 √ 的圖形樣式

 

苦逼的前端工程師在做網站的時候，對以下這種設計圖，都不會太陌生。

 

 對於，圖中 對勾 √ 圖形，該如何優雅的解決這個問題？

1、切圖，切圖解決一切問題。老師都說過，對於不規則圖形，就是 切切切。（這個都會就不用演示了）

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

對於前端 日漸 豐富的 頁面。圖片過多，也會給頁面加載帶來負擔。

2、用 已經日漸成熟的 CSS3 解決。具體怎么操作，繼續往下看。

 .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;
}

簡單解析：重點代碼 就兩行，在上方已經標注。

1、先畫一個帶表框的長方形。

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

3、旋轉-45° 。OK完成了。

 

是不是感覺很簡單？

 

by 不言謝