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;
            }

 

转载于:https://my.oschina.net/51shareweb/blog/393960