利用CSS-border属性实现圆饼图表_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

利用CSS-border属性实现圆饼图表_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:22 AM

　　一般圆饼图表的实现如不考虑IE低版本浏览器的话，利用Canvas或是CSS3都能很好的实现，可是我们现在做的项目最低都要兼容到IE8,所以就想到了Border，相信大家用过border画出各种兼容良好的三角行。

像这样的图表如果只平分四等分的话，实现起来还是挺简单的：

html代码：

<div class="border-i">    <i class="i1"></i>    <i class="i2"></i>    <i class="i3"></i>    <i class="i4"></i></div>

CSS代码：

.border-i{    float:left;    width:80px;    height:80px;    border-radius:40px;    background:#ffd203;    overflow:hidden;    position:relative;    }.border-i i{    width:0;    height:0;    border:40px transparent dotted;    position:absolute;}.border-i .i1{    right:-40px;    top:-40px;}.border-i .i2{    right:-40px;    bottom:-40px;}.border-i .i3{    left:-40px;    bottom:-40px;}.border-i .i4{    left:-40px;    top:-40px;}

现在刚好把一个圆饼平分了四等分，如要不同颜色显示直接改变其border-color即可。

原理如下图，一个带有圆角的容器里面有四个宽高和自己一样的子元素平铺排列，然后溢出隐藏。

所以，如果比例占5%的话(默认宽高都80像素)，

h=40*tan(360deg*5%);

结果约等于13px,那css代码如下：

.border-i .i2{    top:-40px;    right:-13px;    border-right:13px solid  #fd9500;}

呈现效果如下:

可以看出只要控制了圆饼的四分之一即0%~25%，那其他的25%~50%、50%~75%、75%~100%原理都一样，

其中除去几个特殊值:

    /* 0% *//* 所有border-color默认透明； */　　/* 25% */.border-i .i2{border:40px #fd9500 solid;}　　/* 50% */.border-i .i2,.border-i .i3{border:40px #fd9500 solid;}　　/* 75% */.border-i .i2,.border-i .i3,.border-i .i4{border:40px #fd9500 solid;}　　/* 100% */.border-i .i1,.border-i .i2,.border-i .i3,.border-i .i4{border:40px #fd9500 solid;}

其他的计算原理都一样：

/* *设 A = 5%~25%; *  H = 40 * tan(360deg * A%); */.border-i .i1{        right: -Hpx;        border-left: Hpx solid #fd9500;}/* *设 B = 25%~50%; *  H = 40 * tan(360deg *(B% - 25%)); */.pct30 .i1{border-color: #fd9500;}.pct30 .i2{    bottom: -Hpx;    border-top: Hpx solid #fd9500;}/* *设 C = 50%~75%; *  H = 40 * tan(360deg *(C% - 50%)); */.pct55 .i1, .pct55 .i2{border-color: #fd9500;}.pct55 .i3{    left: -Hpx;    border-right: Hpx solid #fd9500;}/* *设 D = 75%~100%; *  H = 40 * tan(360deg *(D% - 75%)); */.pct80 .i1, .pct80 .i2, .pct80 .i3{border-color: #fd9500;}.pct80 .i4{    top: -Hpx;    border-bottom: Hpx solid #fd9500;}

最后Demo效果如下：

Demo源码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>利用CSS-border属性实现圆饼图表</title></head><style>    *{margin:0;padding:0;border:none;}    .border-i{        margin:5px;        float:left;        width:80px;        height:80px;        border-radius:40px;        background:#ffd203;        overflow:hidden;        position:relative;        }    .border-i p{        position:absolute;        left:20px;        top:30px;        font-size:20px;    }    .border-i i{        width:0;        height:0;        border:40px transparent dotted;        position:absolute;    }    .border-i .i1{        right:-40px;        top:-40px;    }    .border-i .i2{        right:-40px;        bottom:-40px;    }    .border-i .i3{        left:-40px;        bottom:-40px;    }    .border-i .i4{        left:-40px;        top:-40px;    }    /* 默认0% */    /* 15% h = 40*tan(360deg * 15%) = 55 (px) */    .pct15 .i1{        right:-55px;        border-left:55px solid  #fd9500;    }    /* 25% */    .pct25 .i1{        border-color:#fd9500;    }    /* 40% h=40*tan(360deg*(40%-25%))=55 (px) */    .pct40 .i1{        border-color:#fd9500;    }    .pct40 .i2{        bottom:-55px;        border-top:55px solid #fd9500;    }    /* 50% */    .pct50 .i1,    .pct50 .i2{        border-color:#fd9500;    }    /* 65% h=40*tan(360deg*(65%-50%))=55 (px) */    .pct65 .i1,    .pct65 .i2{        border-color:#fd9500;    }    .pct65 .i3{        left:-55px;        border-right:55px solid #fd9500;    }    /* 75% */    .pct75 .i1,    .pct75 .i2,    .pct75 .i3{border-color:#fd9500;}    /* 90% h=40*tan(360deg*(90%-75%))=55 (px) */    .pct90 .i1,    .pct90 .i2,    .pct90 .i3{        border-color:#fd9500;    }    .pct90 .i4{        top:-55px;        border-bottom:55px solid #fd9500;    }    /* 100% */    .pct100 .i1,    .pct100 .i2,    .pct100 .i3,    .pct100 .i4{border-color:#fd9500;}</style><body>    <div class="border-i pct0">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>0%</p>    </div>    <div class="border-i pct15">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>15%</p>    </div>    <div class="border-i pct25">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>25%</p>    </div>    <div class="border-i pct40">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>40%</p>    </div>    <div class="border-i pct50">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>50%</p>    </div>    <div class="border-i pct65">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>65%</p>    </div>    <div class="border-i pct75">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>75%</p>    </div>    <div class="border-i pct90">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>90%</p>    </div>    <div class="border-i pct100">        <i class="i1"></i>        <i class="i2"></i>        <i class="i3"></i>        <i class="i4"></i>        <p>100%</p>    </div></body></html>

如果要兼容IE8以下的浏览器的圆角（border-radius），就加一个尺寸一样的遮罩层，背景为圆形镂空背景色的纯色png图片：

<!--[if lt IE 9]><script src="http://s1.benimg.com/min/f=/v4/base/js/jq172.js"></script><script type="text/javascript" >$(function(){$('.border-i').append('<div style="width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;background:url('图片地址') no-repeat center top;}"></div>');});</script><![endif]-->

在body底部

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.

HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM

일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.

Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.