首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

找出来的都是用障眼法实现相应的效果,根本不是我想要的,忽然想起来前阵子掘金给了一本张鑫旭大佬的css新世界,于是乎去翻了翻书里的内容,果然找到了解决的办法,那就是用强大的clip-path属性,下面就让我们来看看这个属性如何实现我们想要的效果的吧...本文仅描述如何使用clip-path实现我们想要的效果,不会对clip-path其他属性进行讲解,如感兴趣可自行搜索学习。...先说说传统的做法是如何实现制作扇形的,我从网上得知的方法使用border-radius属性两个半圆,然后通过旋转其中一个半圆的方式去达成想要的效果,就像下面这样 当扇形角度大于180度的时候,我们第二个半圆的颜色就要与第一个圆的颜色一样...7087597301052473374 可以看到,大于180度的扇形没有问题,但是小于180的角就要求我们背景颜色必须为纯色,并且背景颜色不变才可以,那我们的主角clip-path是如何实现的呢?...至于怎么做空心的扇形呢,也很简单,我们把圆的背景色改成边框就可以了,就像下面这样子,画一个边框,然后裁剪左上角的位置,边框和裁剪区域重叠的部分就会留下来。

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

    如何用tkinter给你女朋友画一个爱心,这满满的油腻感是怎么回事?

    如何用tkinter给你女朋友画一个爱心,这满满的油腻感是怎么回事? 前言 还记得在之前的文章中,我们所提及到桃心的方式吗?...需要使用到,那就需要知道画布的功能。 tkinter的画布功能。 第一步:导入模块 tkinter是python的内置模块,所以不需要额外安装,只需要引用就可以。...我们先分析一下桃心的构成,将桃心分为上下两个部分,然后上半部分我们又可以分为两个扇形,下半部分是一个三角形。...canvas=Canvas(tk,width=w,height=h) canvas.config(highlightthickness=0) canvas.pack() #左边的扇形...coord = 0, 100, 360, 360 arc = canvas.create_arc(coord, start=0, extent=180, fill="pink") #右边的扇形

    94210
    领券