用纯CSS画一个单选勾号

用纯css画一个单选勾号(代码如下)

<style>
    .checked {
        margin-top: 200px;
        margin-left: 200px;
        background: red;
        width: 160px;
        height: 160px;
        border-radius: 50%;
        position: relative;
    }
    .checked::after {
        content: "";
        background-color: white;
        width: 50px;
        height: 8px;
        position: absolute;
        top: 100px;
        left: 32px;
        transform: rotate(30deg);
        border-radius: 8px;
    }
    .checked::before {
        content: "";
        background-color: white;
        width: 90px;
        height: 8px;
        position: absolute;
        top: 76px;
        left: 60px;
        transform: rotate(-50deg);
        border-radius: 8px;
    }
</style>

<div class="checked"></div>

显示效果如下图


WX20210612-165357.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容