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

本文链接：https://blog.csdn.net/Lyrelion/article/details/119834912

本文介绍了如何使用CSS的clip-path属性来创建平行四边形的tab按钮和不规则弹框边角效果，避免了背景图片拼接和点击事件混乱的问题。通过clip-path可以更优雅地实现设计稿需求，提高代码效率和用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

一. 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-right
        marginRight: '-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);
    }