CSS3伪元素之Before/After_html/css_WEB-ITnose

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