CSS中clip-path属性的使用

levius 发布于2019-08-02 11:42 / 2720人阅读

摘要：的使用值为多个坐标点组成，坐标第一个值是方向，第二个值是方向。值为椭圆的轴半径，轴半径，定位椭圆的坐标三部分组成。

clip-path的使用 polygon

值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。

左上角为原点，右下角是(100%,100%)的点。

body {
  background-color: #000;
}

.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}

.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}

.polygon1 {
  clip-path: polygon(50% 0px, 100% 100%, 0px 100%)
}

.polygon2 {
  clip-path: polygon(0px 50%, 50% 0, 100% 50%, 50% 100%)
}

.polygon3 {
  clip-path: polygon(0% 60%, 20% 0%, 60% 0%, 40% 60%)
}


  polygon
  值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。
  左上角为原点，右下角是(100%,100%)的点。

circle

值为一个坐标点和半径组成。

左上角为原点，右下角是(100%,100%)的点。

定义半径的时候可以用at关键字来定义坐标。

body {
  background-color: #000;
}

.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}

.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}

.circle1 {
  clip-path: circle(50% at 50% 50%)
}

.circle2 {
  clip-path: circle(70% at 50% 50%)
}

.circle3 {
  clip-path: circle(30% at 10% 10%)
}


  circle
  值为一个坐标点和半径组成。
  左上角为原点，右下角是(100%,100%)的点。
  定义半径的时候可以用at关键字来定义坐标。

ellipse

值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。

左上角为原点，右下角是(100%,100%)的点。

at关键字将半径和坐标分开。

body {
  background-color: #000;
}

.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}

.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}

.ellipse1 {
  clip-path: ellipse(30% 20% at 50% 50%)
}

.ellipse2 {
  clip-path: ellipse(20% 30% at 50% 50%)
}

.ellipse3 {
  clip-path: ellipse(60% 10% at 10% 10%)
}


  ellipse
  值为椭圆的x轴半径，y轴半径，定位椭圆的坐标三部分组成。
  左上角为原点，右下角是(100%,100%)的点。
  at关键字将半径和坐标分开

inset

值为(上右下左 round 左上角radius 右上角radius 右下角radius 左下角radius)

round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制。

body {
  background-color: #000;
}

.fa {
  border: 1px solid #fff;
  color: yellowgreen;
  padding: 10px;
  margin: 10px;
}

.fa>div {
  width: 110px;
  height: 110px;
  background-color: yellowgreen;
  margin: 20px auto;
}

.inset1 {
  clip-path: inset(25% 0% 25% 0% round 0% 25% 0% 25%)
}

.inset2 {
  clip-path: inset(0% 25% 25% 0% round 25% 25% 25% 0%)
}

.inset3 {
  clip-path: inset(25% 25% 0% 0% round 0% 25% 0% 25%)
}


  inset
  值为(上 右 下 左 round 左上角radius 右上角radius 右下角radius 左下角radius)
  round前面的数值，表示的是距离，如果第一个值为25%，则表示图像在上面从25%开始绘制

云服务器 GPU云服务器 html中使用css css中使用cdn css的使用 js包装对象中的属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53060.html

不可思议的CSS之clip-path

摘要：一个用来生成各种形状包括随意拖拉自定义并且可以直接生成代码的网站。兼容性目前兼容性较差，和直接不支持，考虑兼容性的同学可以暂时等等。透明区域表示被裁剪的区域基本图形定义一个矩形。语法说明可选，表示填充规则用来确定该多边形的内部。本文首发于我的博客曾经和某位朋友在聊天中讨论过这样一个话题：综合90%的网站的布局以及页面中的元素不是方的，就是圆的。就像所有的颜色都是由三原色（RGB）...

walterrwu 2019-08-29 13:17 评论0 收藏0
使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变

摘要：介绍直译过来就是裁剪路径，使用或形状定义一个元素的可见区域的方法。想象一下你在中勾勒路径的场景。上是这样介绍的属性可以防止部分元素通过定义的剪切区域来显示，仅通过显示的特殊区域。属性代替了现在已经弃用的剪切属性。clip-path介绍 clip-path 直译过来就是裁剪路径，使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样...

番茄西红柿 2019-04-23 11:44 评论0 收藏0
CSS中clip-path属性的使用

摘要：的使用值为多个坐标点组成，坐标第一个值是方向，第二个值是方向。值为椭圆的轴半径，轴半径，定位椭圆的坐标三部分组成。 clip-path的使用 polygon 值为多个坐标点组成，坐标第一个值是x方向，第二个值是y方向。左上角为原点，右下角是(100%,100%)的点。 body { background-color: #000; } .fa { border: 1px ...

KnewOne 2019-08-29 16:58 评论0 收藏0
CSS 实现三角形，非 Hack

摘要：写过向上箭头，对话气泡或其他类似的尖角元素的人都知道，为了创建一个纯实现的三角形，必须使用某些。最流行的两种方式是通过边框实现，或字符。例如，我们无法在三角形上使用背景图片，因为边框和字符只能使用颜色。为了实现三角形，我们需要使用函数。写过 HTML upvote arrow（向上箭头），speech bubble（对话气泡）或其他类似的尖角元素的人都知道，为了创建一个纯 CSS 实...

LinkedME2016 2019-08-29 18:37 评论0 收藏0