CSS中的基本图形和路径

在CSS中有些属性是允许CSS绘制图形形状,比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外,在CSS中还有类似circle()函数也可以绘制圆形。

除此之外,在CSS中有一些形状是为CSS其它属性服务,比如clip-pathmask服务和在shape-outside让文本围绕形状排版。

还有一些CSS属性使用像SVG中的图形做一些事情,比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能,可以绘制任何图形。

在接下来的内容中,来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。

CSS中的基本图形

在CSS中polygon()circle()ellipse()inset()函数可以绘制基本形状。在CSS中的offset-pathshape-outside中都可以使用这四个图形函数,实现对应的路径动画以及文本围绕排版效果。他们虽然绘制基本形状,但也常将其称之为路径图形。那么什么是路径呢?

什么是路径

使用过SVG的同学对路径这个词并不会感到陌生,在SVG中有一个<path>元素,允许我们绘制任何东西。在HTML中,我们可以这样来使用<path>绘制图形:

<path d="M 25,100 C 25,150 75,150 75,100 S 100,25 150,75" />

在CSS中可以通过path()来实现类似上面绘制图形的效果:

path("M 25,100 C 25,150 75,150 75,100 S 100,25 150,75");

属性中的图形

如果你前面有接触过clip-path或者shape-outside话知道。虽然这里面用到类似像circle()polygon()的图形,但令人奇怪的是,使用的并不是像SVG中的<path>或者说path()函数。而offset-path却可以使用path()而不是基本图形里面的图形函数。

看上去有些混乱,但我们可以慢慢将这些理一理,能帮助你更好的理解CSS中的形状和路径。

clip-path可以使用基本形状但不能使用path()

在CSS的clip-path属性中可以使用CSS的基本图形(polygon()circle()ellipse()inset())但不能使用path()。比如,我们在项目中需要使用不规则的用户头像,那么我们可以通过clip-path来完成。比如:

.avatar {
  clip-path: polygon(0% 5%, 100% 0%, 100% 85%, 65% 80%, 75% 100%, 40% 80%, 0% 75%);
}

你能看到类似下图的效果:

但是,如果你想要用户的头像实现像下图这样形状的效果:

剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/basic-shapes-path.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部