简单记录：如何用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 不言谢