用css3绘制关闭按钮

最新推荐文章于 2023-05-13 14:55:24 发布

VIP文章你最可爱521

最新推荐文章于 2023-05-13 14:55:24 发布

阅读量757

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/qq_44184794/article/details/106872008

版权

问题：绘制如下图所示的关闭按钮

在这里插入图片描述
思路：

1.用一个div作为按钮的容器；

2.使用伪元素before和after各绘制一条线；

设置伪元素的宽度和高度；都使用绝对定位，水平居中，垂直居中；before伪元素顺时针旋转45度；after伪元素逆时针旋转45度
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            height: 100px;
            width: 100px;
            background-color: #2ecc71;
        }
        .close {
            font-size: 0;
        }
        .close::before,
        .close::after {
            content: '';
            width: 50px;
            height: 5px;

最低0.47元/天解锁文章

你最可爱521

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用css3绘制关闭按钮

问题：绘制如下图所示的关闭按钮思路：1.用一个div作为按钮的容器；2.使用伪元素before和after各绘制一条线；设置伪元素的宽度和高度；都使用绝对定位，水平居中，垂直居中；before伪元素顺时针旋转45度；after伪元素逆时针旋转45度代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫