精华内容
下载资源
问答
  • css绘画扇形

    2020-10-08 16:08:12
    css中绘画半圆形: <div class="semi-sector"></div> .semi-sector { height: 50px; width: 100px;... border-radius: 50px 50px 0...css绘画任意角度的扇形: 思路: 先一个圆,然后再用 absolute 绝

    css中绘画半圆形:

        <div class="semi-sector"></div>
    
    	 .semi-sector {
          height: 50px;
          width: 100px;
          border-radius: 50px 50px 0 0; /* border-radius 要等于圆的半径*/
          background-color: red;
        }
    

    在这里插入图片描述

    css绘画任意角度的扇形:

    思路:
    先画一个圆,然后再用 absolute 绝对布局画两个半圆,然后 rotate 旋转两个半圆,注意使用 transform-origin 设置好圆心。

        <div class="circle"></div>
        <div class="sector1"></div>
        <div class="sector2"></div>
    
        body {
          margin: 0;
        }
        .circle {
          width: 100px;
          height: 100px;
          border-radius: 100px;
          background-color: red;
        }
        .sector1 {
          transform-origin: 50px 50px;
          transform: rotate(90deg);
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100px;
          height: 50px;
          background-color: white;
          border-radius: 50px 50px 0 0;
        }
        .sector2 {
          transform-origin: 50px 50px;
          transform: rotate(120deg);
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100px;
          height: 50px;
          background-color: white;
          border-radius: 50px 50px 0 0;
        }
    

    在这里插入图片描述

    展开全文
  • css 画扇形

    2019-03-18 13:56:25
    画扇形 .div{ width:0; height:0; border-width:50px; border-style:solid; // 到此,会显示正方形 border-radius: 50px; // 显示 圆 border-color: #f00 transparent transparent; // 圆的左右下边框设为...

    画扇形

    .div{
        width:0;
        height:0;
        border-width:50px;
        border-style:solid;  // 到此,会显示正方形
        border-radius: 50px;  // 显示 圆
        border-color: #f00 transparent transparent;  // 圆的左右下边框设为透明,即为扇形。
    }

     

    展开全文
  • 如何用css画扇形?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。1、使用border-radius属性画扇形示例:div{border-radius:80px 0 0;width: 80px;height: 80px;...

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

    4c5b825607ea170301342adbd60a329a.png

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

    示例:

    div{

    border-radius:80px 0 0;

    width: 80px;

    height: 80px;

    background: #666;

    }

    效果图:

    8493b78e95b2687fead9523a5ab32204.png

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

    2、矩形+半圆相切

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

    9690af13c2ee47ac4a571e64401bdef7.png

    至于细节:

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

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

    6c6f40fe8b622f2307a5a467fb3c3e24.png

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

    3、渐变

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

    // 渐变角度0 透明和黑色各占一半

    linear-gradient(0deg,transparent 50%,black 50%);

    f6bb0fc97bea2adc8801c526cb82484d.png

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

    8f0e26cc3b1bdce6bf4dcfcd04fd4e4f.png

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

    bdcfa6ed705676355a25fbbbd11bbb0b.png

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

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

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

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

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

    展开全文
  • css画扇形按钮

    2019-03-19 16:47:00
    这就需要画扇形。百度了一下,有很多文章讲了如何生成扇形,最后我借鉴了一个最简单的实现方式,使用css的clip属性,完美实现。 参考文章为:http://www.cnblogs.com/zhidong123/p/6026761.html,对作者表示感谢。 ...

    最近项目中需要制作一个扇形按钮,效果是这样的:

      

    周围四个扇形,和中间的小圆,全是能点击的。这就需要画扇形。百度了一下,有很多文章讲了如何生成扇形,最后我借鉴了一个最简单的实现方式,使用cssclip属性,完美实现。

    参考文章为:http://www.cnblogs.com/zhidong123/p/6026761.html,对作者表示感谢。 

     

    clip,剪裁图像,

     

    (来自w3schoolhttp://www.w3school.com.cn/cssref/pr_pos_clip.asp

     

    我的偶像张鑫旭早在2011年就写过关于clip的博文,https://www.zhangxinxu.com/wordpress/2011/04/css-clip-rect/他网站上关于clip还有很多其他文章,都可以看看。

     

    好了,说到我要实现的这个扇形按钮组,

    首先最外面肯定有一个圆形:

     

     

    然后,再画一个圆形,设成绝对定位,并加上背景色:

     

     

    接着,进行裁剪,把右边、下边全部裁掉,只留下左上角,clip: rect(0px, 100px, 100px, 0px);

     

     

    再旋转一下角度,转45度就好:

     

     

    如此这般,再画三个圆,进行同样的裁剪,只是旋转的角度不同。就会得到四块“蛋糕” 

     

     

    最后再往中间贴一块小圆:

     

    成功啦!

     

    调整成效果图中的颜色,并加上边框,调整细节,注意裁剪的数值为99,比原来少了一像素,这样互相之间就有个小空隙,更好看,显得更高极。

     

     

    最后附上代码:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6         <style>
     7             body{background: #525252;}
     8             .sector{position: relative;width: 200px;height: 200px;margin: 0 auto;border: 2px solid #4a4a4a;border-radius: 50%;background: #4a4a4a;}
     9             .sector .box{position: absolute;width: 200px;height: 200px;border-radius: 50%;clip: rect(0px, 99px, 99px, 0);}
    10             .sector .box,
    11             .sector .center{transition: 0.5s;background: #5e5e5e;cursor: pointer;}
    12             .sector .box:hover,
    13             .sector .center:hover{background: #777;}
    14             .sector .s1{transform: rotate(45deg);}
    15             .sector .s2{transform: rotate(135deg);}
    16             .sector .s3{transform: rotate(-135deg);}
    17             .sector .s4{transform: rotate(-45deg);}
    18             .sector .center{width: 90px;height: 90px;position: absolute;left: 54px;top: 54px;border: 2px solid #4a4a4a;border-radius: 50%;}
    19         </style>
    20     </head>
    21     <body>
    22         <div class="sector">
    23             <div class="box s1"></div>
    24             <div class="box s2"></div>
    25             <div class="box s3"></div>
    26             <div class="box s4"></div>
    27             <div class="center"></div>
    28         </div>
    29     </body>
    30 </html>

     

    怎么样,是不是超简单的,新技能,get

     

    转载于:https://www.cnblogs.com/hzhjxx/p/10559666.html

    展开全文
  • css画扇形的学习记录

    2018-11-29 18:16:36
    如何构造扇形?用三角形伪装... 三角形的宽高如何计算?假定圆半径 $radius 为 100px,等分数 $count 为 15。则小扇形的圆心角为 360deg / 15 ,三角形的高为 100px,宽为 2 × 100px × tan(360deg / 15 / 2) ...
  • css画扇形的几种实现方式

    万次阅读 2018-04-26 11:36:16
    前言 前两天做了360前端星技术测验,其中有个UI效果实现是这样的 (请实现如图warning...下面我将从扇形的不同实现着手讲解我对这个UI效果实现的思考。 完整代码: https://github.com/EmilyYoung71415/iCSS/t...
  • css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形,下面我们来看一下如何使用css画扇形。通过css画扇形:div{border-radius:80px 0 0;width: 80px;height: ...
  • css已经越来越强大了 ,可以使用它来绘制各种简单的形状,用于代替图片显示,这次的分享主要用到画圆,扇形,下面我们来看一下如何使用css画扇形。通过css画扇形:div{border-radius:80px 0 0;width: 80px;height: ...
  • css3 扇形动画

    2019-09-26 16:22:13
    css3 扇形动画 扇形动画,因为我工作中遇到了只执行一次就ok,所以没细研究,该css暂时只能执行1次扇形动画,无限循环会有问题。 css: @keyframes rotateAn{ 0%{transform: rotate(0deg); } ...
  • 解压密码:RJ4587 我们之前已经分享过很多CSS3菜单了,很多都比较实用,有部分CSS3菜单外观...今天要分享的这款CSS3菜单外观是扇形的,并且在鼠标滑过菜单时,扇形菜单项将会以动画的方式展开,并且支持多级下拉菜单。
  • 使用CSS画一个扇形

    2020-08-03 10:16:10
    使用css画扇形代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
  • CSS如何画扇形

    2019-10-11 23:04:15
    用border + 宽高为0可以正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...
  • CSS画扇形

    2020-01-21 16:39:37
    一个圆,外加两个绝对定位的半圆 扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现 这只能切出180°以内的扇形 超过180°的扇形,就把圆作为底色,两个遮罩作为扇形的组成部分 想获得不同度数的扇形...
  • CSS3扇形动画菜单

    2017-02-05 10:39:37
    CSS3扇形动画菜单    *{padding:0; margin: 0;}  body{background:#b1b1b1;margin:0px;padding:0px;font-size:14px;color:#000;}  
  • css画出一个扇形 <div class="sector1"></div> .sector1{ width:200px; height:200px; background:yellow; border-radius: 200px 0 0 0; } 主要点在于border-radius,四个值对应的弧度是:左上,右...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 146
精华内容 58
关键字:

css画扇形