clip-path的妙用

clip-path可以把一个DIV切割

这样就可以完成一些图片的剪辑了,还可以点击图片观看大图,不过主要还是运用在移动端,PC端兼容性不强。

完美!这样我就可以用DIV去画阿童木了!
先来个demo

*{
    margin:0;
    padding:0;
}
div{
    position: relative;
    width:200px;
    height:100px;
    background:#ffbe00;
    display: inline-block;
    font-size: 0;
    /*-webkit-clip-path:polygon(50% 0%, 100% 50%, 50% 100%);
    -webkit-transition:all .5s;*/
    -webkit-clip-path:polygon(0 0, 100% 0,100% 90px,50% 100%,0 90px);
}
div:after{
    content:"";
    display: inline-block;
    width:100%;
    height:20px;
    position: absolute;
    bottom:0;
    left:0;
    background:red;
    -webkit-clip-path:polygon(50% 0,100% 100%,0 100%);
}
<div></div>
clip-path的各个点连起来的内容,就是会展示在我们面前的内容

这样我们就获取到了红色线连起来的部分的内容了,实现DIV的切割!


和原图简直一毛一样!没有一点点的差别啊!嘻嘻

时间: 2024-11-05 16:05:23

clip-path的妙用的相关文章

第5模块闯关练习

1.列举你知道的css选择器 说道css选择器,大家都知道有许多种,但是真要你去掰着手指头数一数的话,你可能需要数几分钟.其实这么多选择器,完全可以分为两类: 标签选择器(*是特殊情况),可但标签,也可上下文多标签: 通用选择器 * 大家应该都比较熟悉了,最常用的就是 *{margin:0; box-sizing:border-box;}.mragin:0咱们在上一节已经说过 多标签 多标签选择器一般和html上下文有关,它有以下集中分类 选择一个祖先的所有子孙节点,例如 div p{-} 选择

CSS的clip-path

在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将付出巨大的开发成本. 虽然CSS Shapes Module Level 1(CSS形状模块标准1)的规范出现,可以打破矩形设计的限制.但仍需要一些不规则的图形.而早前实现一些不规则的图形,都需借助其它的元素功能,比如CSS绘制图形,很多时候就依赖于伪元素,或多个元素.如此一来,CSS Shapes依旧无

CSS的clip-path 一

首先介绍一下,我觉得前端开发都是很具有分享精神的,很多人都写出了很多优秀的总结经验供新手们参考,本人只是个搬运工,将别人优秀的文章进行了总结,本文主要转载自  大漠  的文章  http://www.w3cplus.com/css3/introducing-css-clip-path-property.html 在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端

SVG开发包, 20 个有用的 SVG 工具,提供更好的图像处理

20 个有用的 SVG 工具,提供更好的图像处理 SVG 现正在 Web 设计领域变得越发流行, 你可以使用 Illustrator 或者 Inkscape 来创建 SVG 图像. 但当进行 Web 设计时,我们还需要做一些优化来使得 SVG 变得更加轻量. 下面介绍的 20 个工具,可以帮助你快速有效的创建 SVG 图像.现有的在线工具已经可以帮助我们进行优化.转换.新建模式等工作. 更详细的介绍,参见:How To Create SVG Animation Using CSS 交互式 SVG

文字菜单动画畅想

p{text-indent:2em;}前端开发whqet,csdn,王海庆,whqet,前端开发专家 本博之前曾经写过两篇博文<纯css3文字效果推荐>.<css3立体文字最佳实践>得到了大家的广泛认可,今天我们更进一步,研究一下文字菜单上可以做哪些动画,12种效果会不会由您喜欢的,来来来,开工. 本文案例演示代码我放在了codepen,速度可能有点慢,不过相信真正的前端童鞋应该喜欢codepen的强大之处. ------------------------------------

canvas 遮罩

上一篇介绍了CSS3可以实现mask的方式,本篇介绍canvas同样也可以实现遮罩的方法: 原理: canvas是在画布上绘图,可以绘制各种形状,同时可以在一个层上重复画图,默认情况下后面的会覆盖前面的图,但是有一个属性可以设置多个图重复时的显示规则,就如同css3中的-webkit-mask-composite一样,canvas有一个属性叫globalCompositeOperation,他可以有以下取值: source-over(默认值):在原有图形上绘制新图形 destination-ov

[IOS_HTML5]IOS7下HTML5的各种坑

 这些天 Apple 已经推出了 iOS 7 以及 iPhone 5S 和 iPhone 5C .Apple 面向 web 开发者仅仅发布了 10% 的所需信息,我可以说这是自 1.0 以来,bug 最多的 Safari 版本嘛.文本我将介绍新的 API 和特性,以及如果你有网站或 webapp ,马上需要处理的大多数问题. 简而言之 没有时间读这篇长文? UI 变化:工具栏色彩,新的全屏导航问题,新的主屏图标尺寸:iPhone 未使用 <title>:可能与新手势冲突. 新设备:对 web

CSS3/SVG clip-path路径剪裁遮罩属性简介

一.SVG属性和CSS3属性千丝万缕的关系 CSS3新增属性除了我们现在用的比较多的border-radius, box-shadow, gradient, ...之类,还有很重要的一个分支:SVG属性家族! 所谓「SVG属性家族」是指原本SVG的标签属性可以直接使用CSS设置. 比方说,之前介绍“SVG Sprites技术”时候提到的fill属性,以及之后专门写了篇文章“SVG图标颜色文字般继承与填充”讲CSS中使用SVG的fill属性实现一些效果.还有很经典的在CSS中使用 stroke-d

js制作简单的趋势图

一.加载js文件 1 ZC={AG:function(l,e){if(l.indexOf){return l.indexOf(e)}else{for(var h=0,a=l.length;h<a;h++){if(l[h]==e){return h}}return -1}},VERSION:"0.130812",CHARTS:["null","null3d","line","line3d","

Unity中使用Microphone录音保存以及回放

录音类 MicrophoneManager包含开始录音,停止录音,播放录音以及录音的保存等. public partial class MicrophoneManager : MonoBehaviour { private static MicrophoneManager m_instance; private static string[] micArray = null; //录音设备列表 private AudioClip audioClip; private DateTime begin