使用CSS的clip-path属性实现不规则图形的显示_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

方法/步骤HTML结构该鼠标点击按钮特效中每一个可点击的元素都是一个按钮CSS样式以下是该css3点击按钮特效的通用CSS样式:插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果:上面的CSS代码可以生成如下图的动画效果:在“Stana”效果中,使用了html5 SVG clipPath,在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。在“Stoja”效果中使用了CSS clip-path属性,这个效果也需要浏览器的支持才能看得到的www.zgxue.com防采集请勿采集本网。

clip-path

图形的边界被称做剪切路径,不要和已经废弃掉的 clip 属性混淆,你可以使用 clip-path 去创建一个剪切路径。遮罩基础 在网页上,遮罩是使用 PNG 图片、CSS 渐变、或一个 SVG 元素来隐藏图片或其它元素的

CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示,区域外的隐藏。

关键点有两个,一是两个图片要重叠,二是把重叠上去的图片绘制成三角形。关于第二点需要用到clip-path属性。它有很多用法,可以绘制多边形,圆形,椭圆形和圆角。关于clip-path的使用 polygon 值

例子

div { width: 200px; height: 200px; background: #6c00af; -webkit-clip-path: polygon( 28% 6%, 71% 15%, 100% 75%, 18% 39%, 63% 27%, 16% 22%, 65% 19% ); clip-path: polygon( 28% 6%, 71% 15%, 100% 75%, 18% 39%, 63% 27%, 16% 22%, 65% 19% );}

看看下面这个代码是否符合要求: pic { width:320px;height:240px;webkit-clip-path:polygon(10%0,0 100%,100%100%,90%0);clip-path:polygon(10%0,0 100%,100%100%,90%0);overflow:hidden } pic

绘制cilp-path神器

首先说明一点:目前为止任何利用css来实现不规则边框的方法都是具有很严重的浏览器兼容性的(幸运的是微信小程序是支持的,哈哈),如果你想研究,请搜 css3 clip-path polygon 最兼容也是最简单

 

bennettfeely.com/clippy/

语法

/* Keyword values */clip-path: none;/* <clip-source> values */ clip-path: url(resources.svg#c1);/* <geometry-box> values */clip-path: margin-box;clip-path: border-box;clip-path: padding-box;clip-path: content-box;clip-path: fill-box;clip-path: stroke-box;clip-path: view-box;/* <basic-shape> values */clip-path: inset(100px 50px);clip-path: circle(50px at 0 100px);clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');/* Box and shape values combined */clip-path: padding-box circle(50px at 0 100px);/* Global values */clip-path: inherit;clip-path: initial;clip-path: unset;

取值

<clip-source>

<url> 表示剪切元素的路径

<basic-shape>

一种形状,其大小和位置由<几何盒>值定义。如果没有指定几何框,则边框将用作参考框

<geometry-box>

如果同 <basic-shape> 一起声明,它将为基本形状提供相应的参考框盒。通过自定义,它将利用确定的盒子边缘包括任何形状边角(比如说,被 border-radius 定义的剪切路径)。几何框盒可以有以下的值中的一个:

margin-box

使用 margin box 作为引用框。

border-box

使用 border box 作为引用框。

padding-box

使用 padding box 作为引用框。

content-box

使用 content box 作为引用框。

fill-box

利用对象边界框作为引用框。

stroke-box

使用笔触边界框(stroke bounding box)作为引用框

view-box

使用最近的 SVG 视口(viewport)作为引用框。如果 viewBox 属性被指定来为元素创建 SVG 视口,引用框将会被定位在坐标系的原点,引用框位于由 viewBox 属性建立的坐标系的原点,引用框的尺寸用来设置 viewBox 属性的宽高值。

none

不创建的剪切路径。

到此这篇关于使用CSS的clip-path属性实现不规则图形的显示的文章就介绍到这了,更多相关CSS的clip-path不规则图形内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

;height:174px;webkit-clip-path:polygon(50%0,0 100%,100%100%);clip-path:polygon(50%0,0 100%,100%100%);text-align:center;line-height:300px;color:#fff;background-color:red">等边三角形height:100px;webkit-clip-path:polygon(50%0,0 100%,100%100%);clip-path:polygon(50%0,0 100%,100%100%);text-align:center;line-height:175px;color:#fff;background-color:red">等腰直角三角形</div>内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • css中clip-path属性的使用详解
  • css3 clip-path 用法介绍详解
  • css中的clip-path区域裁剪属性使用教程
  • css3中的clip-path使用攻略
  • 如何使用HTML&CSS写一个三角形
  • html5 svg和css3炫酷鼠标点击按钮特效怎么用
  • html5 svg和css3炫酷鼠标点击按钮特效怎么用
  • css 能隐藏 incolude加载 页面能隐藏吗
  • 如何使用CSS和SVG剪切和遮罩技术
  • 请问一下各位大佬下面这个图片用HTML和CSS该怎么做
  • css写的梯形里面怎么放图片
  • css里怎么实现正方形下边斜着的图形
  • 如何创建一个圆形进度按钮
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程不规则图形clip-pathcss中clip-path属性的使用详解css3 clip-path 用法介绍详解css中的clip-path区域裁剪属性使用教程css3中的clip-path使用攻略css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字使用css的clip-path属性实现不规则图形的显示使用css和java来构建管理仪表盘布局的实例代码css如何匹配到多个class的示例代码css伪类 右下角点击出现 对号角标表示选中的示例代码css实现背景渐变和自动全屏的代码浅析css :is() 和 :where() 即将出现在浏览器中基于css variable的主题切换完美解决方案(推荐)使用css text-emphasis对文字进行强调装饰的实现代码css实现skeleton screen骨架屏效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved