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

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

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

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

推荐专题

最新下载

热门教程

css div网页折叠层

时间：2022-06-25 10:18:00 编辑：袖梨 来源：一聚教程网

 

 代码如下 复制代码

 .arrow {
    width: 0;
    height: 0;
    line-height: 0;
    border-left: 20px solid transparent;
    border-top: 10px solid #c8c8c8;
    top: 104%;
    left: 0;
    position: absolute;
}

    

这其中关键的属性是border-left 和 border-top，这两个属性形成了一个三角形效果，也就是带子的拐角效果，你可以将以上代码的5、6行，做如下更改，看看效果：

1
2

 代码如下 复制代码
 border-right: 20px solid transparent;
border-top: 10px solid #c8c8c8;

     再做一次更改，看看什么效果：

1
2

 代码如下 复制代码
 border-left: 20px solid transparent;
border-bottom: 10px solid #c8c8c8;

     通过这几次更改，你可以看到，border-right、border-left和border-bottom、border-top的不同组合，可以实现三角形的不同的朝向，你可以举一反三制作你的折叠效果了
下面看效果

 代码如下 复制代码

 



css shapes




   

我的标题




 

相关文章

热门栏目

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

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

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