首页
学习
活动
专区
圈层
工具
发布

教你如何用css3的clip-path画扇形、空心扇形(透明背景哦)

本文仅描述如何使用clip-path实现我们想要的效果,不会对clip-path其他属性进行讲解,如感兴趣可自行搜索学习。...,来形成扩展的效果,如果扇形角度小于180度的时候,我们第二个半圆的颜色就要与背景的颜色一样,这里第二个圆的颜色为了大家好理解,用了浅蓝色和浅灰色 https://code.juejin.cn/pen/...7087597301052473374 可以看到,大于180度的扇形没有问题,但是小于180的角就要求我们背景颜色必须为纯色,并且背景颜色不变才可以,那我们的主角clip-path是如何实现的呢?...,这时候我们可以画一个圆,然后去裁剪我们想要的图形就可以了,就像下面这样子(后面会放集合代码块),我们先画一个圆,然后去裁剪左上角的一块区域(浅蓝色),然后裁剪区和背景区重叠的部分就会留下来(扇形)...至于怎么做空心的扇形呢,也很简单,我们把圆的背景色改成边框就可以了,就像下面这样子,画一个边框,然后裁剪左上角的位置,边框和裁剪区域重叠的部分就会留下来。

4.9K30
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Node的 path.resolve 和 path.join 的区别

    一、区别 path.join只是简单的将路径片段进行拼接,并规范化生成一个路径,而path.resolve则一定会生成一个绝对路径,相当于执行cd操作。...二、path.join() path.join() 方法使用平台特定的分隔符把全部给定的 path 片段连接到一起,并规范化生成的路径。 长度为零的 path 片段会被忽略。...给定的路径的序列是从右往左被处理的,后面每个 path 被依次解析,直到构造完成一个绝对路径。...如果处理完全部给定的 path 片段后还未生成一个绝对路径,则当前工作目录会被用上。 生成的路径是规范化后的,且末尾的斜杠会被删除,除非路径被解析为根目录。 长度为零的 path 片段会被忽略。...如果没有传入 path 片段,则 path.resolve() 会返回当前工作目录的绝对路径。 举例: path.resolve('/foo/bar', '.

    2.9K30

    LD_LIBRARY_PATH和LIBRARY_PATH的区别

    头文件搜索规则如下: 所有header file的搜寻会从-I开始 然后找环境变量 C_INCLUDE_PATH,CPLUS_INCLUDE_PATH,OBJC_INCLUDE_PATH指定的路径 再找默认目录...动态库搜索路径(由动态链接器负责) 编译目标代码时指定的动态库搜索路径-L; 环境变量LD_LIBRARY_PATH指定的动态库搜索路径; 配置文件/etc/ld.so.conf中指定的动态库搜索路径;...根据链接的时机可知 LIBRARY_PATH环境变量用于在程序编译期间查找动态链接库时指定查找共享库的路径,例如,指定gcc编译需要用到的动态链接库的目录。...设置方法如下(其中,LIBDIR1和LIBDIR2为两个库目录): export LIBRARY_PATH=LIBDIR1:LIBDIR2:$LIBRARY_PATH LD_LIBRARY_PATH环境变量用于在程序加载运行期间查找动态链接库时指定除了系统默认路径之外的其他路径...,注意,LD_LIBRARY_PATH中指定的路径会在系统默认路径之前进行查找。

    1.5K40

    nodejs的path模块

    前言path 模块是 nodejs 中用于处理文件/目录路径的一个内置模块,可以看作是一个工具箱,提供诸多方法供我们使用,当然都是和路径处理有关的。...同时在前端开发中 path 模块出现的频率也是比较高的,比如配置 webpack 的时候等。本文是对该模块中一些常用的方法进行介绍,走,一起学习下吧。....js .css 等返回值:path 路径的最后一部分注意:如果 path 不是字符串或者给定的 ext 参数不是字符串,则抛出 TypeError如果有 ext 参数,当 ext 后缀名与文件名匹配上时返回的文件名会省略文件后缀如果...(将路径片段解析后生成的绝对路径)注意:路径片段如果给出则必须是字符串类型,否则类型错误给定的路径序列从右到左进行处理,每个后续的 path 前置,直到构造出一个绝对路径如果处理完所有给定的 path...结语关于nodejs path 模块,我们今天就说到这里了,虽然 api 不是很多,但是 path 模块在前端的使用频率还是非常高的,所以觉得很值得学习了解一下的。

    1.1K30

    Python——关于path的坑

    1 path python有一个内置的os模块,使用help(os.path)命令,print一下就可以获取关于路径的语法介绍,篇幅较长这里就不贴出来了,感兴趣的童鞋可以自行查阅。...# @Software: PyCharm import os import sys path = "C:/document/test" path2 = os.path.join(path,"defrey...","zoe.txt") print("os.path.join %s" %path2) print(os.path.dirname(path)) print(os.path.split(path2...)) print(os.path.splitext(path2)) print("os.path.abspath %s"% os.path.abspath(path2)) print("os.path.basename...具体用法提示 当设计复杂一点的功能时,只使用一个类似path = "C:/***/***"的路径,然后使用os模块中的语法新建目录、拼接路径等,当要迁移代码到其他设备时,只须改动一下path一个参数即可

    1.1K41

    node中的path模块

    path模块,其实还是在webpack中用过一下下,至于node,还没开始用。这个模块算是基础,当作是预习一下。 path模块方法还是有几个的,这边只学习几个认为有必要、能用到的几个方法。...引入path模块都一样: let path = require('path'); path.resolve: webpack配置output的时候使用过,相当于cd命令: console.log(path.resolve.../coding console.log(path.dirname('/html/coding')) /html path.basename: 返回文件名,其实就是最后的名字: console.log(path.basename...path.relative: 接收两个参数,(from, to),表示从from路径到to路径的相对路径: console.log(path.relative('/html/coding/coding.html...path.normalize: 字面上是规范路径,其实就是把尾巴不规范的去除: console.log(path.normalize('/html/coding')) \html\coding console.log

    86620

    SQL中的for xml path

    今天就给大家介绍一下FOR XML PATH,它就是用来处理低版本数据库中数据合并的,是一个比较古老的功能了,新版本中也依然还能使用。...FOR XML PATH是什么 FOR XML PATH 是将查询结果集以XML形式展现,将多行的结果,展示在同一行。 我们用实例来给大家介绍它的神奇之处。...SELECT * FROM dbo.Stu_Hobby FOR XML PATH; 结果如下: 它会生成一段XML代码,我们点击这行代码会弹出一整个XML的页面,由于篇幅较长,我们只截取一部分,具体如下...: 此外我们还可以在FOR XML PATH的后面写参数,如果后面接参数,会将节点换成参数名称,例如: SELECT * FROM dbo.Stu_Hobby FOR XML PATH(hobby) 结果如下图...AND Age=A.Age FOR XML PATH('')) AS Hobby FROM [dbo].Stu_Hobby A GROUP BY A.Stu_Name,A.Age 见证奇迹的时刻到了

    55210

    路径path的常用操作

    路径包只能用于以正斜杠分隔的路径,例如 URL 中的路径。...此软件包不处理带有驱动器号或反斜杠的 Windows 路径; 要操作操作系统路径,请使用路径/文件路径包 base func Base(path string) string Base 返回路径的最后一个元素...image.png Clean func Clean(path string) string 通过规则处理让源路径成为最短等价路径 处理规则如下 1.使用单斜线取代多斜线 2.取消每个包含.名称的路径...3.取消内部包含..的路径 4.取消/..根路径的元素,使用/替换 这个过程是循环执行的,直到路径符合所有规则 示例 package main import ( "fmt" "path"...image.png Dir func Dir(path string) string 获取路径,返回最后一个/之前的字符串,如果路径为空,则返回.

    84030

    细说nodejs的path模块

    前言path 模块是 nodejs 中用于处理文件/目录路径的一个内置模块,可以看作是一个工具箱,提供诸多方法供我们使用,当然都是和路径处理有关的。...同时在前端开发中 path 模块出现的频率也是比较高的,比如配置 webpack 的时候等。本文是对该模块中一些常用的方法进行介绍,走,一起学习下吧。....js .css 等返回值:path 路径的最后一部分注意:如果 path 不是字符串或者给定的 ext 参数不是字符串,则抛出 TypeError如果有 ext 参数,当 ext 后缀名与文件名匹配上时返回的文件名会省略文件后缀如果...(将路径片段解析后生成的绝对路径)注意:路径片段如果给出则必须是字符串类型,否则类型错误给定的路径序列从右到左进行处理,每个后续的 path 前置,直到构造出一个绝对路径如果处理完所有给定的 path...结语关于nodejs path 模块,我们今天就说到这里了,虽然 api 不是很多,但是 path 模块在前端的使用频率还是非常高的,所以觉得很值得学习了解一下的。

    1.1K20

    PATH 和 CLASSPATH 的区别

    java中的path和classpath是很多java初入者比较困惑的两个变量。本文简单列举二者区别。...PATH and CLASSPATH的区别 1)第一个主要的不同点就是PATH是用来找到那些jdk的二进制文件比如“java”或者“javac”命令,这个些命令是用来运行java program和编译java...2) 第二个不同点就是,设置PATH你需要在PATH环境变量中包含JDK_HOME/bin目录,然而设置CLASSPATH我们则需要包含我们的java application中必须用到的.class文件或者...4) 另外PATH是被操作系统用来查找在shell中输入的那些命令(比如前面的“java”等)以及用来查找二进制文件的。...在Windows上设置PATH的命令: set PATH=%PATH%;C:\Program Files\Java\JDK1.6.20\bin 在UNIX/Linux上设置PATH的命令: export

    2.9K120

    false path和asynchronous的区别

    常用的不让工具分析两个时钟域交互的方式有两种,一种是设置为伪路径(False Path),一种是设置为异步(Asynchronous)。那这两种设置方式有什么区别呢?...(假设工程中有两个异步时钟clka和clkb) 伪路径的设置是单向的,而异步时钟的约束是双向的,所以下面两种方式的约束是等价的 方式一: set_false_path -from [get_clocks...-asynchronous -group clka -group clkb -group clkc 如果通过set_false_path的方式设置这三个时钟,就要写好几行。...伪路径可以设置边沿,但异步时钟约束并没有该参数选项,比如可以只将setup time设为false path,继续分析hold time,或者可以将clka的上升沿到clkb的下降沿设为false path...: set_false_path -rise_from clka -fall_to clkb -setup 优先级不一样,在Vivado中,set_clock_groups的优先级是要高于set_false_path

    44230

    Path相关评论的方法(一)

    另外一种就是直接复用src 里设置的属性创建一个新的Path对象。...path.reset():清除掉path里的线条和曲线,可是不会改变它的fill-type(后面setFillType再说); path.rewind():清除掉path里的线条和曲线,可是会保留内部的数据结构以便重用...; path.set(Path src);用src的内容替换原path的内容,一起看个小样例: 创建一个path,加入一个实心圆到path里 mEndPath = new Path(); mEndPath.addCircle...的FillType能够总结例如以下: 1.Path的默认FillType为 FillType.WINDING; 2.作用的范围为绘制 Path 的 Canvas 总体。...这能使path有效率的分配它的存储空间。 好了,这篇就主要介绍这些方法。后面主要介绍 Path 里 XXXTo 和 addXXX 相关的方法,最后我们再一起用Path做个样例!

    32320
    领券