搜索
查看: 1469|回复: 0

css两边翘起效果

[复制链接]

649

主题

942

帖子

2421

积分

管理员

本论坛第一帅

Rank: 9Rank: 9Rank: 9

积分
2421

热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2021-3-29 17:46:39 | 显示全部楼层 |阅读模式
利用css实现DIV两边翘起效果

css如下;
 .box1 li{
    width: 328px;
    height: 129px;
    position: relative;
    background: #fff;
    float: left;
    margin: 20px 10px;
    border: 2px solid #f5f5f5;
        list-style:none;

                }
               
.box1 li:before{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    left:21px;
    background: transparent;
    z-index: -2;
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    -webkit-box-shadow: 0 8px 10px rgba(0,0,0,0.6);
    -o-box-shadow: 0 8px 10px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 20px 20px rgba(0,0,0,0.8);
    transform:skew(-12deg) rotate(-6deg);
    -webkit-transform:skew(-12deg) rotate(-6deg);
    -moz-transform:skew(-12deg) rotate(-6deg);
    -os-transform:skew(-12deg) rotate(-6deg);
    -o-transform:skew(-12deg) rotate(-6deg);
}

.box1 li:after{
    content:"";
    position:absolute;
    width:90%;
    height: 80%;
    bottom: 13px;
    right:21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 10px rgba(0,0,0,0.6);
    transform:skew(12deg) rotate(6deg);
    -webkit-transform:skew(12deg) rotate(6deg);
    -moz-transform:skew(12deg) rotate(6deg);
    -os-transform:skew(12deg) rotate(6deg);
    -o-transform:skew(12deg) rotate(6deg);
}

调用:
 <div class="boxtp"><h1>bbskali.cn</h1></div>

有志者,事竟成,破釜沉舟,百二秦关终属楚. 苦心人,天不负, 卧薪尝胆 ,三千越甲可吞吴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

快速回复 返回顶部 返回列表