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

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

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 不言謝

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。