CSS3实现关闭icon

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control " content="no-cache,must-revalidate">
    <meta name="description" content="">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta content="telephone=no" name="format-detection" />
    <meta name="x5-orientation" content="portrait">
    <title>关闭</title>
    
</head>

<style>
    .app {
        position: relative;
        width: 500px;
        height: 500px;
        background: red;
    }
    .close {
        width: 20px;
        height: 20px;
        /*方便相对于父元素进行定位*/
        position: absolute;
        top: 10px;
        right: 10px;
        border: 1px solid greenyellow;
        border-radius: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .close::before,
    .close::after{
        content: "";
        height: 16px;
        width: 1.5px;
        background: lightgreen;
    }
    .close::before{
        transform: rotate(45deg);  /*进行旋转*/
    }
    .close::after{
        transform: rotate(-45deg);
    }
</style>

<body>
    <noscript>
        <strong>We're sorry but photo-live doesn't work properly without JavaScript enabled. Please enable it to
            continue.</strong>
    </noscript>
    <div class="app">
        <div class="close"></div>
    </div>

</body>

</html>
CSS3实现关闭icon

推荐阅读更多精彩内容
