css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,下面给大家介绍一下怎么画扇形。
示例:利用border-radius,实现90度角的扇形:
css代码
<style> .sector{ border-radius:80px 0 0; width: 80px; height: 80px; background: #666; } </style>
HTML代码:
<div class="sector"></div>
效果图:
原理:
border-radius:80px 0 0;
左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。
拓展:
绘制任意角度的扇形
<html> <head> <meta charset="UTF-8"> <title>扇形绘制</title> <style> .shanxing{ position: relative; width: 200px; height: 200px; border-radius: 100px; background-color: yellow; } .sx1{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆,在clip的rect范围内的 内容显示出来,使用clip属性,元素必须是absolute的 */ border-radius: 100px; background-color: #f00; /*-webkit-animation: an1 2s infinite linear; */ } .sx2{ position: absolute; width: 200px; height: 200px; transform: rotate(0deg); clip: rect(0px,100px,200px,0px); border-radius: 100px; background-color: #f00; /*-webkit-animation: an2 2s infinite linear;*/ } /*绘制一个60度扇形*/ .shanxing1 .sx1{transform: rotate(-30deg);} .shanxing1 .sx2{transform: rotate(-150deg);} /*绘制一个85度扇形*/ .shanxing2 .sx1{transform: rotate(-45deg);} .shanxing2 .sx2{transform: rotate(-140deg);} /*绘制一个向右扇形,90度扇形*/ .shanxing3 .sx1{transform: rotate(45deg);} .shanxing3 .sx2{transform: rotate(-45deg);} /*绘制一个颜色扇形 */ .shanxing4 .sx1{transform: rotate(45deg);background-color: #fff;} .shanxing4 .sx2{transform: rotate(-45deg);background-color: #fff;} /*绘制一个不同颜色半圆夹角 */ .shanxing5 .sx1{transform: rotate(45deg);background-color: #f00;} .shanxing5 .sx2{transform: rotate(-45deg);background-color: #0f0;} </style> </head> <body> 扇形制作原理,底部一个纯色原形,里面2个相同颜色的半圆,可以是白色,内部半圆按一定角度变化, 就可以产生出扇形效果 <p>/*绘制一个60度扇形*/</p> <div class="shanxing shanxing1"> <div class="sx1"></div> <div class="sx2"></div> </div> <p>/*绘制一个85度扇形*/</p> <div class="shanxing shanxing2"> <div class="sx1"></div> <div class="sx2"></div> </div> <p>/*绘制一个向右扇形,90度扇形*/</p> <div class="shanxing shanxing3"> <div class="sx1"></div> <div class="sx2"></div> </div> <p>/*绘制一个颜色扇形 */</p> <div class="shanxing shanxing4"> <div class="sx1"></div> <div class="sx2"></div> </div> <p>/*绘制一个不同颜色半圆夹角 */</p> <div class="shanxing shanxing5"> <div class="sx1"></div> <div class="sx2"></div> </div> </body> </html>
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是css3扇形怎么画?的详细内容,更多请关注易知道|edz.cc其它相关文章!