网站访问工具,制作网站的基本步骤是,江苏网站建设效果好,台州网站建设费用实现原理#xff0c;先绘制一个圆#xff0c;然后把圆分成两份#xff0c;在绘制一个菱形#xff0c;最下面的角是120#xff0c;这样就可以实现三等分啦 关键代码是一个css很少见的属性clip-path clip-path: polygon(24rem 36rem, 48rem 18rem, 24rem 0, 0 18rem); …
实现原理先绘制一个圆然后把圆分成两份在绘制一个菱形最下面的角是120°这样就可以实现三等分啦 关键代码是一个css很少见的属性clip-path clip-path: polygon(24rem 36rem, 48rem 18rem, 24rem 0, 0 18rem); polygon值是根据勾股定理算出来 !DOCTYPE html
htmlheadmeta charsetutf-8title纯css实现三等分饼图/titlestyle.border {display: flex;border: solid;width: 50rem;height: 50rem;overflow: hidden;border-radius: 50%;position: relative;flex-wrap: wrap;}.box1 {display: inline-block;width: 100%;height: 100%;background-color: rgba(1, 1, 1, .5);margin-top: -15%;margin-left: 2%;clip-path: polygon(24rem 36rem, 48rem 18rem, 24rem 0, 0 18rem);z-index: 1;}.box2 {display: inline-block;width: 50%;height: 100%;background-color: pink;position: absolute;}.box3 {display: inline-block;width: 50%;height: 100%;background-color: lightskyblue;position: absolute;right: 0;}/style/headbodydiv classborderdiv classbox1/divdiv classbox2/divdiv classbox3/div/divscript typetext/javascript srcjs/jquery-2.1.4.min.js/scriptscript$(.box1).click(() {alert(1)})$(.box2).click(() {alert(2)})$(.box3).click(() {alert(3)})/script/body/html
以上代码引入一下jquery后可以直接使用噢
