css绘写勾勾跟叉叉

最新推荐文章于 2024-01-17 06:33:43 发布

枫之记

最新推荐文章于 2024-01-17 06:33:43 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/arey_maple/article/details/79378044

版权

前端专栏收录该内容

17 篇文章 0 订阅

订阅专栏

勾勾

原理：
右边框+下边框，顺时针旋转45deg

效果：

<i class="icon_true"></i>
.icon_true{
    display:inline_block;
    width: 6px;
    height: 10px;
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

叉叉

原理：
一个div顺时针旋转45deg，另一个逆时针旋转90deg

效果：

<i class="icon_false"></i>
.icon_false {
    display: inline-block;
    width: 10px;
    height: 2px;
    background: #999;
    line-height: 0;
    font-size: 0;
    vertical-align: middle;
    -webkit-transform: rotate(45deg);
}

.icon_false:after {
    content: '/';
    display: block;
    width: 10px;
    height: 2px;
    background: #999;
    -webkit-transform: rotate(-90deg);
}