【CSS】仿Github提交表单框折角样式

 需求：

代码：

demo.html

    
    
    
    

    

    




    

        ...
    

    

        ...
    

    

        ...
    

    

        ...
    

bubble.angle.css

.bubble-angle{
    border: 1px solid #dfe2e5;
    border-radius: 3px;
    position: relative;
}

.bubble-angle:before,.bubble-angle:after{
    border-color: transparent;
    border-style: solid solid outset;
    content: " ";
    display: block;
    width: 0;
    height: 0;
}
.bubble-angle:before{
    border-right-color: #ddd;
    border-width: 8px;
}

.bubble-angle:after {
    border-right-color: #fff;
    border-width: 7px;
}

/*left 左方折角*/
.bubble-angle-left:before,.bubble-angle-left:after {
    position: absolute;
    right: 100%;
    top: 11px;
}

.bubble-angle-left:after {
    margin-left: 2px;
    margin-top: 1px;
}

/*top 上方折角*/
.bubble-angle-top:before,.bubble-angle-top:after {
    position: absolute;
    bottom: 100%;
    left: 11px;
    transform:rotate(90deg);
    -ms-transform:rotate(90deg); 	/* IE 9 */
    -moz-transform:rotate(90deg); 	/* Firefox */
    -webkit-transform:rotate(90deg); /* Safari 和 Chrome */
    -o-transform:rotate(90deg); 	/* Opera */

}

.bubble-angle-top:after {
    margin-left: 1px;
    margin-top: 2px;
}

/*right 右方折角*/
.bubble-angle-right:before,.bubble-angle-right:after {
    position: absolute;
    left: 100%;
    top: 11px;
    transform:rotate(180deg);
    -ms-transform:rotate(180deg); 	/* IE 9 */
    -moz-transform:rotate(180deg); 	/* Firefox */
    -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
    -o-transform:rotate(180deg); 	/* Opera */

}

.bubble-angle-right:after {
    margin-left: 0px;
    margin-top: 1px;
}

/*bottom 下方折角*/
.bubble-angle-bottom:before,.bubble-angle-bottom:after {
    position: absolute;
    top: 100%;
    left: 11px;
    transform:rotate(270deg);
    -ms-transform:rotate(270deg); 	/* IE 9 */
    -moz-transform:rotate(270deg); 	/* Firefox */
    -webkit-transform:rotate(270deg); /* Safari 和 Chrome */
    -o-transform:rotate(270deg); 	/* Opera */

}

.bubble-angle-bottom:after {
    margin-left: 1px;
    margin-top: 0px;
}

完成效果：

点此打包下载demo