CSS3伪元素之Before/After
博客专区 > Hui-Lee 的博客 > 博客详情
CSS3伪元素之Before/After
Hui-Lee 发表于3年前
CSS3伪元素之Before/After
  • 发表于 3年前
  • 阅读 845
  • 收藏 3
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

摘要: 使用CSS3伪元素Before和After做气泡框,箭头,标签

body{
                font-family: cursive;
                font-size: 14px;
            }
            .left{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .left:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left: -30px;
                top: 10px;
                border: 15px solid;
                border-color: transparent green transparent transparent;
            }
            .left:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left: -27px;
                top: 10px;
                border: 15px solid;
                border-color: transparent #fff transparent transparent;
            }

            .right{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .right:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                right: -30px;
                top: 10px;
                border: 15px solid;
                border-color: transparent transparent transparent green;
            }
            .right:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                right: -27px;
                top: 10px;
                border: 15px solid;
                border-color: transparent transparent transparent #fff;
            }

            .up{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .up:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: -30px;
                border: 15px solid;
                border-color: transparent transparent green transparent ;
            }
            .up:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: -27px;
                border: 15px solid;
                border-color: transparent transparent #fff transparent;
            }

            .down{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }
            .down:before{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: 50px;
                border: 15px solid;
                border-color: green transparent transparent transparent ;
            }
            .down:after{
                content: ' ';
                position: absolute;
                width: 0;
                height: 0;
                left:60px;
                top: 48px;
                border: 15px solid;
                border-color: #fff transparent transparent transparent ;
            }

            .line{
                width:150px;
                height: 50px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 50px;
                text-align: center;
                border: 2px solid green;
                border-radius: 5px;
            }

            .line:before{
                border-bottom: 1px solid #3ca156;
                -webkit-transform: skewY(30deg);
                transform: skewY(30deg);
                content: '';
                width: 92px;
                position: absolute;
                left: 30px;
                top: 50%;
            }

            .line:after{
                border-bottom: 1px solid #3ca156;
                -webkit-transform: skewY(-30deg);
                transform: skewY(-30deg);
                content: '';
                width: 92px;
                position: absolute;
                left: 30px;
                top: 50%;
            }

            .fork{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
            }
            .fork:before{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .fork:after{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent green;
                position: absolute;
                top: -0px;
                right: -60px;
            }

            .fork-left{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-left:before{
                content: "";
                border: 30px solid;
                border-color: transparent transparent transparent #fff;
                position: absolute;
                top: 0px;
                left: 0px;
            }

            .fork-right{
                color: #fff;
                width:150px;
                height: 60px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 60px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }

            .fork-right:after{
                content: "";
                border: 30px solid;
                border-color: transparent #fff transparent transparent;
                position: absolute;
                top: 0px;
                right: 0;
            }

            .fork-up{
                color: #fff;
                width:60px;
                height: 150px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 150px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-up:after{
                content: "";
                border: 30px solid;
                border-color: transparent  transparent #fff transparent;
                position: absolute;
                top: 90px;
                right: 0;
            }

            .fork-down{
                color: #fff;
                width:60px;
                height: 150px;
                background: #fff;
                position: relative;
                margin: 50px 0 0 50px;
                line-height: 150px;
                text-align: center;
                background: green;
                border-radius: 5px;
            }
            .fork-down:before{
                content: "";
                border: 30px solid;
                border-color: #fff transparent  transparent  transparent;
                position: absolute;
                top: 0;
                right: 0;
            }

 

标签: CSS3气泡
共有 人打赏支持
粉丝 10
博文 13
码字总数 4551
×
Hui-Lee
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: