css div网页折叠层

作者：袖梨 2022-06-25

代码如下 复制代码

.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




我的标题




相关文章

精彩推荐