CSS实现饼图和环图的绘制

最新推荐文章于 2024-03-05 14:41:29 发布

小鸟哗啦啦

最新推荐文章于 2024-03-05 14:41:29 发布

阅读量494

点赞数 1

分类专栏： HTML5 CSS 文章标签： html css

本文链接：https://blog.csdn.net/vampire10086/article/details/106823676

版权

CSS 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

HTML5

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS实现饼图和环图</title>

    <style>
        .pie {
            width: 300px;
            height: 300px;
            margin: auto;
            border-radius: 50%;
            background: yellowgreen;
            background-image: linear-gradient(to right, transparent 50%, #655 0);
        }

        .pie::before {
            content: '';
            display: block;
            margin-left: 50%;
            height: 100%;
            border-radius: 0 100% 100% 0/50%;
            background-color: inherit;
            transform-origin: left;
            transform: rotate(.2turn);
        }

        .loading {
            margin: 100px auto;
            width: 8em;
            height: 8em;
            position: relative;
        }

        .progress {
            position: absolute;
            width: 6em;
            height: 6em;
            border-radius: 50%;
            background-color: green;
            left: 1em;
            top: 1em;
            text-align: center;
            line-height: 6em;
        }

        .left,
        .right {
            width: 4em;
            height: 8em;
            overflow: hidden;
            position: relative;
            float: left;
            background-color: #999999
        }

        .left {
            border-radius: 8em 0 0 8em;
        }

        .right {
            border-radius: 0 8em 8em 0;
        }

        .left:after,
        .right:after {
            content: "";
            position: absolute;
            display: block;
            width: 4em;
            height: 8em;
            background-color: white;
            border-radius: 8em 0 0 8em;
            background-color: red;
        }

        .right:after {
            content: "";
            position: absolute;
            display: block;
            border-radius: 0 8em 8em 0;
        }

        .left:after {
            transform-origin: right center;
        }

        .right:after {
            transform-origin: left center;
            transform: rotateZ(45deg);
        }
    </style>

</head>

<body>
    <div class="pie"></div>

    <div class="loading">
        <div class="left"></div>
        <div class="right"></div>
        <div class="progress">85%</div>
    </div>
</body>

</html>

小鸟哗啦啦

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS实现饼图和环图的绘制

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>CSS实现饼图和环图</title> <style> .pie { width: 300px; height: 300px; margin: auto; border.
复制链接

扫一扫