装逼大法:用纯css写出一个按钮选择框的样式

今天做了一个页面,一个按钮的选中和未选中样式分别是:

这种效果理应用图片来做,选中的状态给button加一个边框和右下角打勾的透明图片的background即可,大概是:

button:hover{
    background:url('xxx.png') no-repeat;
}

然而我却异想天开试试用css来写这个效果,实践了大约15分钟,完美写出,思路是利用css3的伪类来设置相应样式。

1、三角形怎么用css来写出来?

将矩形旋转。利用transform:rotate(45deg)这样来将矩形旋转45度,再设置overflow:hidden即可显示出三角形的形状。

2、勾怎么画出来?

伪类里属性content,用“✓”即可,不要忘了还可以设置字体大小和颜色。

3、勾不就跟着矩形旋转而旋转?

确实一开始也遇到了这个问题。其实一开始content里设置的属性是“」”,这样跟着矩形旋转到三角形的位置时,符号刚好变成一个勾。

不过因为位置太难调试就放弃了,感觉其实是可以的。后面设置了两个伪类,一个::after 一个::before。

最终的代码如下: (里买有css的一些变量我就不放出来了)

&_button{
    &:hover{
        width: @fontSize*5;
        height: @fontSize*2;
        background:@button;
        border: 2px solid @greeColor;
        outline: none;
        position: relative;
        overflow: hidden;
    
        &::after{
            content:"";
            position: absolute;
            bottom: -@fontSize*2.3;
            right: -@fontSize*3;
            background: @greeColor;
            color:#fff;
            transform:rotate(50deg);
            overflow: hidden;
            width: @fontSize*3;
            height: @fontSize*6;
        }
        
        &::before{
            content:"✓";
            font-size: @fontSize/2.5;
            position: absolute;
            color:#fff;
            right: 0;
            width: @fontSize;
            height: @fontSize;
            bottom: -@fontSize/5;
            right: -@fontSize/5;
            z-index: 99;
        }
    }
    
}

其实吧,这多少是一个装逼吹牛的行为,尤其这还只是给朋友做的一个页面而不是自己的产品或网站。而收获也仅仅是能说:老子用css3实现了!

如果较真的说,这个用15分钟的耗时换来的毫无意义的另类的解法,对于网页来说还是有一丁点好处的:减少了加载一张几k大小的图片,也少了一次请求(但是如果用雪碧图,这点好处也没有了)。但谁让我爱折腾呢?