博客

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

  • Post author:
  • Post category:其他


需求：

代码：


demo.html
 

<!doctype html>
<html lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Github 气泡折角</title>

    <link rel="stylesheet" href="bubble.angle.css">

    <style>
        .main div{
            width: 500px;
            height: 150px;
            padding: 15px;
            margin: 15px;
        }
    </style>

</head>
<body>
<div class="main">
    <div class="bubble-angle bubble-angle-left">
        ...
    </div>

    <div class="bubble-angle bubble-angle-top">
        ...
    </div>

    <div class="bubble-angle bubble-angle-right">
        ...
    </div>

    <div class="bubble-angle bubble-angle-bottom">
        ...
    </div>
</div>

</body>
</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


版权声明：本文为CSDNVIP2011原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。