使用CSS3绘制关闭以及箭头图标

最新推荐文章于 2023-07-07 22:22:41 发布

weixin_33895016

最新推荐文章于 2023-07-07 22:22:41 发布

阅读量262

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/579111

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            float: left;
            margin-right: 5%;
        }
        a {
            display: block;
        }

        /*关闭按钮*/
        .close {
            width: 40px;
            height: 40px;
            position: relative;
        }

        .close:before, .close:after {
            content: '';
            position: absolute;
            top: 50%;
            width: 40px;
            height: 1px;
            background-color: #888;
            -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
        }

        .close:after {
            -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        /*箭头部分*/
        .down-arrow {
            width: 40px;
            height: 40px;
        }

        .down-arrow:after {
            content: '';
            display: block;
            width: 25px;
            height: 25px;
            border-right: 1px solid #888;
            border-top: 1px solid #888;
            -webkit-transform: rotate(135deg); /*箭头方向可以自由切换角度*/
            transform: rotate(135deg);
        }
    </style>
</head>
<body>
<div><a href="javascript:void(0)" class="close"></a></div>
<div><a href="javascript:void(0)" class="down-arrow"></a></div>
</body>
</html>

效果图