使用纯 CSS 绘制 X 关闭按钮

本文介绍了如何简单的只用一个 HTML 元素，通过纯 CSS 就能实现关闭按钮，并通过CSS变量更方便地自定义它的 UI 。

案例演示：

实现代码：

HTML


                    <div class="btnClose"></div>

CSS

【提示】只要对自定义配置中的字段值进行修改即可定制自己想要的尺寸与颜色


                    .btnClose {
                        /* 自定义配置 */
                        --btn-size: 48px;  /* 按钮的宽高 */
                        --btn-x-size: 4px; /* X号线条粗细 */
                        --color: #333;     /* 颜色 */
                        /* 配置 END */

                        position: relative;
                        width: var(--btn-size);
                        height: var(--btn-size);

                        /* X线条旋转后会有偏移，使用 flex 进行居中对齐修正 */
                        display: inline-flex;
                        justify-content: center;
                        align-items: center;
                    }
                    /* 绘制X线条 */
                    .btnClose::after, .btnClose::before {
                        content: "";
                        position: absolute;
                        width: var(--btn-x-size);
                        height: var(--btn-size);
                        background-color: var(--color);
                        border-radius: calc(var(--btn-x-size ) / 2);
                    }
                    /* 两条线条各向左右分别旋转 45 度*/
                    .btnClose::after {
                        transform: rotate(45deg);
                    }
                    .btnClose::before{
                        transform: rotate(-45deg) ;
                    }

代码说明：

我们先使用一个 div 作为关闭按钮的容器；再通过配置它的伪类 ::after 与 ::before 绘制出 X 号的两条线，这样就实现只用一个元素就绘制出了关闭按钮

我们还定义了一些CSS变量来保存按钮的尺寸与颜色值，使得它成为可配置的，满足了今后更多的定制化需求