如何用css画扇形?

如何用css画扇形?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

1、使用border-radius属性画扇形

示例:

<html>
<head>
<style type="text/css">
div{
 border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>
</head>

<body>
<div></div>

</body>

</html>

效果图:

1.png

实现原理:左上角是圆角,其余三个角都是直角:左上角的值为宽和高一样的值,其他三个角的值不变(等于0)。

2、矩形+半圆相切

基本思路是:左边的半圆旋转与右边的矩形相切。

2.png

至于细节:

1、半圆的由来:可以rect裁剪只显示圆的左边部分

2、同理,矩形也通过rect裁剪只显示右边部分,同时没有背景色。这样一个矩形里视觉上只会显示半圆与矩形相切的部分

3.png

然后剩下的完善同样三个标签旋转一定角度。

3、渐变

我们先试试渐变实现半圆:

background:
    // 渐变角度0 透明和黑色各占一半
    linear-gradient(0deg,transparent 50%,black 50%);

4.png

同样我们使用半圆相切的方式,3个半圆旋转一定角度得到一个扇形

5.png

旋转一定角度 取其下半部分

6.png

你可能会想6个扇形是不是渐变6次即可?

当然不是,当颜色占壁超过一半后,剩下的颜色会被覆盖。所以最多只能形成3个扇形得到的半圆(多的那部分裁剪掉),那剩下的一半圆呢?

使用伪类同样的方式生成即可~

这个方法不太容易想到,其实渐变这个属性有很多强大的功能,许多onediv效果实现渐变属性贡献了不少力量,目前我对渐变的属性也尚处于初研究阶段,不得不的吐槽一下渐变属性确实不太好掌握(在PS可视化界面里拉渐变我都拉不好的说..),但是一旦掌握了又将踏入一个新的世界)

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是如何用css画扇形?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏