美文网首页
CSS3实现打钩icon

CSS3实现打钩icon

作者: 会撸码的小马 | 来源:发表于2018-12-21 16:12 被阅读0次
<!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;
    }
    .check
    {
        width: 22px;
        height: 22px;
        border-radius: 100%;
        position: relative;
        border: 1px solid green;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .check::after
    {
        margin-top: -2px;
        width: 6px;
        height: 12px;
        border-style: solid;
        border-color: green;
        border-width: 0 2px 2px 0;
        -webkit-transform: rotateZ(45deg);
        content: " ";
    }
</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="check"></div>
    </div>

</body>

</html>

相关文章

网友评论

      本文标题:CSS3实现打钩icon

      本文链接:https://www.haomeiwen.com/subject/wdfvkqtx.html