如何在不用JavaScript的情况下使用CSS来实现图表功能_css实现扇形分布图不用canvas-优快云博客

本文链接：https://blog.youkuaiyun.com/sandstom_1985/article/details/7771036

最近看到smashing magazine举行的一个小设计创意比赛，其中有个获奖作品完全用css来显示图表功能，觉得很amazing。

于是，在本地大致剖析了下他的实现原理，果然令人耳目一新啊。

注意：下面的代码只在最新的chrome上测试通过。-_-!

先上个最后的效果图

实现的HTML为

<div id="example5">
        <div  id="pyr_chart">
            <ul>
                <li></li><li></li>
                <li></li><li></li>
                <li></li><li></li>
            </ul>
        </div>
    </div>

<div id="example6">
        <div id="pie_chart">
            <ul>
                <li id="c1_r"><p><span class="pie_left"></span></p></li>
                <li id="c1_l"><p><span class="pie_right"></span></p></li>
                <li id="c2_r"><p><span class="pie_left"></span></p></li>
                <li id="c2_l"><p><span class="pie_right"></span></p></li>
                <li id="c3_r"><p><span class="pie_left"></span></p></li>
                <li id="c3_l"><p><span class="pie_right"></span></p></li>
                <li id="c4_r"><p><span class="pie_left"></span></p></li>
                <li id="c4_l"><p><span class="pie_right"></span></p></li>
                <li id="c5_r"><p><span class="pie_left"></span></p></li>
                <li id="c5_l"><p><span class="pie_right"></span></p></li>
            </ul>
        </div>
    </div>

用到的css样式为：

#pyr_chart ul, #pie_chart ul {
            list-style-type:none;
            width:300px;
            height:300px;
            padding:0;
            margin:0;
        }
        
        #pyr_chart1 li, #pie_chart li {
            position:absolute;
            top:0px;
            width:300px;
            height:300px;
            padding:0;
            margin:0;
        }
        #pie_chart p {
            width:300px;
            height:300px;
            padding:0;
            margin:0;
        }
        #pie_chart span {
            display:block;
            width:150px;
            height:300px;
        }
        #pie_chart ul :nth-child(odd) {
            clip:rect(0px, 300px, 300px, 150px);
        }
        #pie_chart ul :nth-child(even) {
            clip:rect(0px, 150px, 300px, 0px);
        }
        .pie_left {
            -webkit-border-top-left-radius:150px;
            -webkit-border-bottom-left-radius:150px;
        }
        .pie_right {
            margin-left:150px;
            -webkit-border-top-right-radius:150px;
            -webkit-border-bottom-right-radius:150px;
        }
        #c1_l span {
            background:#bc3603;
            /*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#de3d00), to(#bc3603));*/
        }
        #c1_r span {
            background:#bc3603;
            /*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#de3d00), to(#bc3603));*/
        }
        #c2_l span {
            background:#8fb900;
            /*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#8fb900), to(#33B900));*/
        }
        #c2_r span {
            background:#8fb900;
            /*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#8fb900), to(#33B900));*/
        }
        #c3_l span {
            background:#FFB900;
            /*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#00FFB9), to(#FFB900));*/
        }
        #c3_r span {
            background:#FFB900;
            /*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#00FFB9), to(#FFB900));*/
        }
        #c4_l span {
            background:#1900FF;
            /*background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#9800FF), to(#1900FF));*/
        }
        #c4_r span {
            background:#1900FF;
            /*background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#9800FF), to(#1900FF));*/
        }
        #c5_l span {
            background:#4A3757;
            background-image:-webkit-gradient(radial, left center, 10, left center, 150, from(#573754), to(#4A3757));
        }
        #c5_r span {
            background:#4A3757;
            background-image:-webkit-gradient(radial, right center, 10, right center, 150, from(#573754), to(#4A3757));
        }
        #pie_chart ul :nth-child(1) p {
            -webkit-transform:rotate(-50deg);
        }
        #pie_chart ul :nth-child(2) p {
            -webkit-transform:rotate(40deg);
        }
        #pie_chart ul :nth-child(3) p {
            -webkit-transform:rotate(0deg);
        }
        #pie_chart ul :nth-child(4) p {
            -webkit-transform:rotate(130deg);
        }
        #pie_chart ul :nth-child(7) p {
            -webkit-transform:rotate(40deg);
        }
        #pie_chart ul :nth-child(8) p {
            -webkit-transform:rotate(-50deg);
        }
        #pie_chart ul :nth-child(5) p {
            -webkit-transform:rotate(130deg);
        }
        #pie_chart ul :nth-child(6) p {
            -webkit-transform:rotate(0deg);
        }
        #pie_chart ul :nth-child(9) p {
            -webkit-transform:rotate(-25deg);
        }
        #pie_chart ul :nth-child(10) p {
            -webkit-transform:rotate(20deg);
        }
        #pyr_chart li {
            -webkit-transition:all .5s;
        }
        #pyr_chart ul :nth-child(1) {
            background: #bc3603;
            background-image: -webkit-gradient(radical, center, center, 10, center, center, 150, from(#de3d00), to(#bc3603));
            height:300px;
        }
        #pyr_chart ul :nth-child(2) {
            background: #D97904;
            background-image: -webkit-gradient(radical, center, center, 10, center, center, 150, from(#fb8a00), to(#D97904));
            height:292px;
        }
        #pyr_chart ul :nth-child(3) {
            background: #F2B705;
            background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#ffc517), to(#F2B705));
            height:277px;
        }

        #pyr_chart ul :nth-child(4) {
            background: #86AD00;
            background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#9bc800), to(#86AD00));
            height:255px;
        }

        #pyr_chart ul :nth-child(5) {
            background: #0092B9;
            background-image: -webkit-gradient(radial, center center, 10, center center, 150, from(#00addb), to(#0092B9));
            height: 180px;
        }

        #pyr_chart ul :nth-child(6) {
            width: 0;
            height: 0;
            border-color: transparent #d8d6cb transparent #d8d6cb;
            border-width: 0px 150px 300px 150px;
            border-style:solid;
        }
        #pyr_chart, #pie_chart {
            position:relative;
            float:left;
            width:300px;
            height:300px;
            margin:0;
            padding:0;
        }
        #pyr_chart li {
            position:absolute;
            width:300px;
        }

以下是本人的一个小创意，完全用CSS实现的一个动物拼图，

用的HTML脚本是：

<div id="example7">
        <div id="head"></div>
        <div id="body">
            <div id="b1"></div>
            <div id="b2"></div>
            <div id="hand"></div>
            <div id="foot"></div>
        </div>        
        <div id="tail">
            <div id="t1"></div>
            <div id="t2"></div>
            <div id="t3"></div>
        </div>
    </div>

用到的CSS样式为：

#example7 {
            position:relative;
            top:400px;
            overflow:hidden;
            width:183px;
            height:150px;
        }
                
        #head {
            width:0;
            height:0;
            border-color:transparent #e0e000 transparent transparent;
            border-width:40px 30px 0 0;
            border-style:solid;
        }
        #body {
            margin:0 0 0 13px;
            position:relative;
            width:95px;
            height:110px;
            overflow:hidden;
        }
        #b1 {
            float:left;
            width:0;
            height:0;
            border-color:transparent #3298fd transparent transparent;
            border-width:0 55px 55px 0;
            border-style:solid;
        }
        #b2 {
            float:left;
            width:0;
            height:0;
            border-color:transparent transparent transparent #fd3200;
            border-width:40px 0 40px 40px;
            border-style:solid;
        }
        #b2:after {
            content:"";
            clear:both;
        }
        #hand {
            position:absolute;
            z-index:3;
            top:17px;
            left:17px;
            width:0;
            height:0;
            border-color:transparent transparent transparent #65fd32;
            border-width:22px 0 20px 20px;
            border-style:solid;
        }
        #foot {
            position:absolute;
            z-index:3;
            bottom:0;
            right:35px;
            width:0;
            height:0;
            border-color:transparent #f29ef2 transparent transparent;
            border-width:35px 35px 0 0;
            border-style:solid;
        }
        #tail {
            position:absolute;
            width:94px;
            height:37px;
            bottom:33px;
            right:0;
        }
        #t1 {
            position:relative;
            top:6px;
            left:6px;
            width:26px;
            height:26px;
            background-color:#fd9800;
            -webkit-transform:rotate(45deg);
        }
        #t2 {
            margin:0;
            width:0;
            height:0;
            border-style:solid;
            border-color:transparent transparent #cb65fd transparent;
            border-width:0 38px 19px 19px;
            position:absolute;
            bottom:0;
            right:19px;
        }
        #t3 {
            margin:0;
            width:0;
            height:0;
            border-style:solid;
            border-color:#cb65fd transparent transparent transparent;
            border-width:19px 19px 0 38px;
            position:absolute;
            bottom:0;
            right:0;
        }