CSS 实现十字架代码 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            div {
                margin:100px auto;
                width: 0;
                height: 0;
                position: relative;
            }
            div:before,div:after {
                content: "";
                position: absolute;
                background: red;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
            }
            div:before {
                width: 100px;
                height: 20px;
            }
            div:after {
                width: 20px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        
        <div></div>
        
    </body>
</html>

 

posted @ 2017-09-05 15:55  吾生有涯，而知无涯！  阅读(2775)  评论(0)  编辑  收藏  举报