CSS3 clip-path 属性的使用示例（平行四边形的 tab按钮 / 不规则八边形弹框边角效果 / ...）不支持 IE 哦

目录

一. clip-path 介绍

二. clip-path 示例

2.1 平行四边形的 tab 按钮

2.2 不规则弹框边角效果

一. clip-path 介绍

clip-path 属性：使用裁剪方式创建元素的可显示区域，区域内的部分显示，区域外的隐藏。 —— MDN 文档

一个 clip-path 在线生成的工具网站：http://tools.jb51.net/code/css3path

用上面的图做例子，假设这个九边形 div 被我设置了 cursor: pointr 属性，那么九边形之外的区域鼠标滑过不会显示手势，而九边形之内的区域可以

注意：clip-path 属性不支持 IE

二. clip-path 示例

2.1 平行四边形的 tab 按钮

设计稿如上图，我最初构想的实现方案是：

通过叠加多个背景图片，实现两边固定，中间自适应增长的背景效果；

将 div 的 margin 值调整一下，实现减小 tab 按钮间距的效果；

这种方案存在的问题：

关于背景 bug：仔细看按钮背景图会发现，中间是固定的，那个小光点高光效果，不可以被拉伸，自适应势必无法很好的展现设计图效果

关于点击 bug：即使背景改变成平行四边形的样子，给他们加点击事件就会暴露他是矩形的事实，修改间距会导致点击上图中的平行四边形角落，会触发别的平行四边形的事件，如下图所示，调整边距会导致 div 部分重合，进而导致点击事件混乱

综上所述，把 div 的默认形状改成平行四边形，是最好的解决方案

我这用的是 Vue3 组件，按钮样式是传进去的，不要在意写法（…）

逻辑：通过 clip-path 调整 div 形状，通过 margin 调整 div 间距，背景就放正常的整张图片，而不是拼接多张背景图片
      // 控制按钮大小、背景、位置的样式const tabItemStyle = {width: '1120px',height: '250px',// 这里 margin-left 负责调整按钮间距，如果按钮向右歪，就改成 margin-rightmarginRight: '-380px',// 这里是把按钮裁剪成平行四边形的形式，防止 div 重合影响点击事件WebkitClipPath: 'polygon(0% 95%, 0% 0%, 96% 0%, 95% 92%)',clipPath: 'polygon(0% 95%, 0% 0%, 96% 0%, 95% 92%)',};cStyle: {// 按钮容器样式tab: {// 默认状态default: {...tabItemStyle,// 正常传入整张背景图片，不要拼接多张background: 'url(./assets/tab-right-default.png) no-repeat',backgroundSize: '100% 100%',},// 激活状态active: {...tabItemStyle,background: 'url(./assets/tab-right-light.png) no-repeat',backgroundSize: '100% 100%',},},},
2.2 不规则弹框边角效果

设计稿如上图，我最初构想的实现方案是：UI 直接切个背景（…）

先不说图片啥的影响请求速度啥的了，公司 UI 比较忙，不敢没事找他【碎碎念】

认识了新属性 clip-path 之后，我可以更优雅的实现这个效果了

分析一下弹框边角本质：就是个八边形

其实写好了左上角之后，其他的边角直接 transform: rotate(); 即可

html 结构：外框 .dialog-outer，其内部包含了弹框边角及内容区域
    <div class="dialog-outer"><div>内容</div><i class="left-top-bg"></i><i class="left-bottom-bg"></i><i class="right-top-bg"></i><i class="right-bottom-bg"></i></div>
css 样式：

给 .dialog-outer 设置相对定位，一定要设置 border-radius: 40px; 防止边角盖不住

四个边角设置绝对定位，将左上角写好样式（宽高、渐变背景、形状）

依据左上的边角进行旋转 transform: rotateX(180deg) rotateY(180deg);
    /* 弹窗外层容器 */.dialog-outer {/* 外框相对定位 */position: relative;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;width: 100%;height: auto;background: rgba(12, 28, 64, 0.8);border-radius: 40px;padding: 92px;/* 解决 padding的负面效果 */box-sizing: border-box;}/* 弹框背景 */.left-top-bg,.left-bottom-bg,.right-top-bg,.right-bottom-bg {/* 边角绝对定位 */position: absolute;width: 90px;height: 90px;/* 实现边角渐变效果 */background: linear-gradient(0deg, #D1A558, #F3DB86);/* 切割边角八边形形状 */clip-path: polygon(30% 0%, 70% 0%, 70% 6%, 32% 6%,6% 33%, 6% 70%, 0% 70%, 0% 30%);}.left-top-bg {top: -3px;left: -2.5px;}.right-top-bg {top: -3px;right: -2.5px;/* 根据左上角的边角效果进行旋转 */transform: rotateY(180deg);}.left-bottom-bg {bottom: -3px;left: -2.5px;transform: rotateX(180deg);}.right-bottom-bg {bottom: -3px;right: -2.5px;transform: rotateX(180deg) rotateY(180deg);}

CSS3 clip-path 属性的使用示例（平行四边形的 tab按钮 / 不规则八边形弹框边角效果 / ...）不支持 IE 哦相关推荐

Python tkinter（六）标签（Label）组件的属性说明及示例
使用语法 widget = Label( master, parameter=value, ... ) master:标签控件的父容器 parameter:标签的参数 value:参数对应的值各参数 ...
半深入理解CSS3 object-position/object-fit属性
半深入理解CSS3 object-position/object-fit属性转载:https://www.zhangxinxu.com/wordpress/2015/03/css3-object-p ...
图解css3：核心技术与案例实战. 3.3　CSS3图片边框属性
3.3 CSS3图片边框属性 border-image效果在CSS2中,只有使用背景图片来制作,而且制作过程非常复杂,做完后也很难维护.如今CSS3中增添了一个图片边框的属性,能够模拟出backgro ...
html5css3菜鸟教程,HTML5+CSS3实现拖放(Drag and Drop)示例
本文简单介绍一下HTML5的拖放实现.MXGHTML5中文学习网 - HTML5先行者学习网拖放(Drag 和 drop)是 HTML5 标准的组成部分.MXGHTML5中文学习网 - HTML5先 ...
CSS3之border属性
border相关属性需要大量练习,方可运用自如! 文字下方有Demo!!! border: 作用: 设置在一个声明中包含所有的边框属性说明: 可以设置 ...
CSS3之background属性
background: 作用: 在一个声明中设置所有的背景属性说明: 可以设置的属性分别是:background-color, background-posi ...
CSS3之text属性
color: 作用: 指定文本的颜色说明: 该属性在块.行内.行内块的样式表中都可以使用,改变被控制元素内部所有文本的颜色关于颜色值的四种写法: ...
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
这篇文章主要介绍了使用CSS3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少...well,需要的朋友可以参考下纯HTML+CSS实现阿童木头像先上最终效果图: 在里面主要用的 ...
CSS3之size属性
width: 说明: 设置元素的宽度作用: width属性不包括填充,边框,或页边距常用值: (auto):默认值,浏览器会计算出实际的 ...

CSS3 clip-path 属性的使用示例（平行四边形的 tab按钮 / 不规则八边形弹框边角效果 / ...）不支持 IE 哦

一. clip-path 介绍

二. clip-path 示例

2.1 平行四边形的 tab 按钮

2.2 不规则弹框边角效果

CSS3 clip-path 属性的使用示例（平行四边形的 tab按钮 / 不规则八边形弹框边角效果 / ...）不支持 IE 哦相关推荐

最新文章

热门文章