clip-path应用

对话框

clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);

五角星

clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);

旋转边框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.container {height: 100px;width: 150px;position: relative;}.container::before,.container::after {content: "";position: absolute;top: -15px;bottom: -15px;left: -15px;right: -15px;border: 5px solid #24acf2;animation: clippath 3s infinite linear;}.container::after {animation: clippath 3s infinite -1.5s linear;}@keyframes clippath {0% {clip-path: inset(0 0 95% 0);}25% {clip-path: inset(0 95% 0 0);}50% {clip-path: inset(95% 0 0 0);}75% {clip-path: inset(0 0 0 95%);}100% {clip-path: inset(0 0 95% 0);}}
</style>
<body><div class="container"></div>
</body>
</html>

效果如下：

渐变色边框圆角

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>.container {height: 100px;width: 150px;position: relative;left: 200px;top: 200px;display: flex;justify-content: center;align-items: center;border: 5px solid #24acf2;border-image: linear-gradient(45deg, gold, deeppink) 1;clip-path: inset(0px round 5px);}
</style>
<body><div class="container"></div>
</body>
</html>

正常情况下，如果我们设置border-radius: 5px; 会发现没有任何效果，因为使用了border-image 而导致其失效。那么我们采用clip-path: inset(0px round 5px);就可以完美解决。

round 5px可以理解为在原先裁剪结果后实现border-radius：20px的效果，也就是把多余的裁减掉。

旋转圆环

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container{position: absolute;top: 200px;left: 200px;width: 200px;height: 200px;}.circle {position: absolute;width: 200px;height: 200px;border: 2px solid black;border-radius: 50%;animation: animate 3s infinite linear;}.right{clip-path: inset(0 0 100px 100px);}.left{clip-path: inset(100px 100px 0 0);}@keyframes animate {0% {transform: rotateZ(0deg);}100% {transform: rotateZ(360deg);}}</style></head><body><div class="container"><div class="circle right"></div><div class="circle left"></div></div></body>

效果如下：

clip-path应用相关推荐

c语言clip函数,深入理解裁剪(clip)
裁剪 canvas中有一个功能是裁剪,通过裁剪功能,可以实现裁剪区域.裁剪区域是canvas中由路径(可以称之为裁剪路径)所定义的一块区域,所有的绘图操作都限制在本区域内,区域之外的绘制效果会被忽略. ...
CSS的clip-path
摘要:在Web网页中主要是以矩形分布的.而平面媒体则倾向于更多不同的形状.造成这种差异的原因是因为缺少合适的工具去实现我们平面媒体中的内容.这也就造成了很多设计师的创意发挥,就算是有创意,前端实现也将 ...
android 图片圆角遮罩_Android 自定义View练手Demo（一）实现圆角遮罩效果
Android 自定义View系列文章 Android自定义View实现圆角遮罩效果一图胜千言,有一个遮罩就会凸显出重点区域 1-1.jpg 本文通过两种方式来实现这种效果,来达到自定义View练手 ...
裁剪(Clipping)-Window GDI
裁剪(Clipping)-Window GDI http://blog.csdn.net/windcsn/article/details/492105 裁剪是在一个应用程序的窗口中限制输出区域或路径的 ...
android开发控件水波纹,Android实现水波纹控件的方法
有很多app使用过水波纹的这样的效果,看着很酷酷的样子,所以自己就撸码写了一个. 实现思路: 利用贝塞尔曲线绘制圆弧(也就是水波的波纹) 通过动画改变绘制的起始点使水波纹平移首先,定义我们需要的自定 ...
用css3实现ps蒙版效果+动画
说实话,css3越来越强大,使用css也可以做越来越多意想不到的效果. 今天,见到有人用css3实现了ps的蒙版效果,如下所示: 实现原理这个动画,其实也并不复杂.它使用background-cli ...
element-ui表单_每日UI挑战强加-登录表单（分步教程）
element-ui表单 A step by step journey to create a good design from the daily UI challenge 一步步走,从日常的UI挑 ...
HTML5 Canvas 绘图
首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...
040_Auto.js
040_Auto.js 参考:如何学习auto.js 小米锁屏工具放首页点击坐标 click(99,1151) // 点击坐标 click(dian3.bounds().centerY(), dia ...
html5 Canvas 绘制基本图形从直线图形到使用路径 - 直线、矩形、路径、多边形、复杂组合图形
html5: Canvas 绘制基本图形从绘制直线到路径 Jack Lee 的 CSDN 博客邮箱 :291148484@163.com CSDN 主页:https://blog.csdn.n ...

clip-path应用

clip-path应用

clip-path应用相关推荐

最新文章

热门文章