纯css实现关闭按钮

问题背景：
做一个提示弹窗。设计图上面有一个x的关闭按钮，在图标库没找到合适的，开始为了偷懒用的字母x，后来ui说看起来怪怪的。没办法只有根据设计图一比一的画一个。

实现：
采用::after和 ::before 伪元素。
这里穿插一个小知识点

伪元素：是在内容元素前后插入一个额外的元素。这些元素在文档源中不可见，但是在显示中可见。
伪类：比如hover 等特殊交互行为

dom结构：

<body>
    <div class="box">
        <div> content </div>
        <div class="mask"></div>
        <div class="dialog">
            <div class="close"></div>
        </div>
    </div>
</body>

样式：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100vw;
            height: 0;
        }

        .mask {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 999;
            opacity: 0.5;
            background-color: #000;
        }

        .dialog {
            position: fixed;
            bottom: 0;
            width: 100vw;
            height: 40vh;
            background-color: #fff;
            z-index: 1000;
            border-radius: 4vw 4vw 0 0;
            padding-top: 3vw;
        }

        .close {
            position: absolute;
            right: 4vw;
            width: 4vw;
            height: 4vw;
            line-height: 4vw;
            text-align: center;
            color: #222;
        }

        .close:before {
            position: absolute;
            content: '';
            width: 0.8vw;
            height: 4vw;
            background: #222;
            transform: rotate(45deg);
            top: calc(50% - 0.45vw);
            left: 50%;
        }

        .close:after {
            content: '';
            position: absolute;
            width: 0.8vw;
            height: 4vw;
            background: #222;
            transform: rotate(-45deg);
            top: calc(50% - 0.45vw);
            left: 50%;
        }
    </style>

最终效果：

纯css实现关闭按钮

Lingo

引用和评论

策略模式在前端的应用

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号