一聚教程网：一个值得你收藏的教程网站

ps教程| flash教程| 路由器设置| Jsp教程| 加入收藏

PHP教程 Css教程 操作系统 数据库 安卓下载

首页 游戏下载 软件下载 专题 资讯教程 php教程 asp.net教程 css教程 网页制作 网页特效 手机开发 办公数码
+ -
当前位置：一聚教程网 > 网页制作 > 设计基础

推荐专题

最新下载

热门教程

css如何实现流程导航效果 css实现流程导航效果代码实例

时间：2022-06-25 14:14:38 编辑：袖梨 来源：一聚教程网

本篇文章小编给大家分享一下css实现流程导航效果代码实例，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

具体内容如下所示：

本文统一采取flex布局，你也可以采用其他布局实现，核心原理不变

## 方法一 利用裁剪 该方法IE下不支持

利用裁剪 clip-path: polygon（），直接画出一个三角 唯一一点需要算出大致百分比就可以画出来 



    
        
        
    
    
        
        
    
            
  1. 规则说明
    2. 
            
  2. 参与活动
    3. 
            
  3. 参与抽奖
    4. 
            
  4. 奖品发放
    5. 
            
  5. 查看结果
    6.

## 方法二 利用错位

flex + transform : skewX(); 实现 ie9+ 状况下使用前缀 -ms- + 这个方法也完全利用里before after， + 原理1 --- 利用 before + after 分成上下半区 + 原理2 --- 利用 before + after 分成左右半区 



    
        
        
    
    
        
        
    
            
  1. 1-规则说明
    2. 
            
  2. 2-参与活动
    3. 
            
  3. 3-参与抽奖
    4. 
            
  4. 4-奖品发放
    5. 
            
  5. 5-参与结果
    6.

## 方法三 border造三角

利用 border 生成前后三角 缺点是索引需要自己定义 不加标签情况下无法使用css计数器 




  
  
        
  • 1-规则说明
    • 
        
  • 2-参与活动
    • 
        
  • 3-参与抽奖
    • 
        
  • 4-奖品发放
    • 
        
  • 5-参与结果
    •

    相关文章

    热门栏目

    一聚教程网| 关于我们| 联系我们| 广告合作| 友情链接| 版权声明

    copyRight@2007-2022 www.111CN.NET AII Right Reserved

    网站内容来自网络整理或网友投稿如有侵权行为请邮件:[email protected] 我们24小时内处理