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

最新推荐文章于 2023-11-21 13:14:54 发布

「已注销」

最新推荐文章于 2023-11-21 13:14:54 发布

阅读量417

点赞数

分类专栏： CSS 文章标签： github css 折角

本文链接：https://blog.csdn.net/CSDNVIP2011/article/details/86623508

版权

CSS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

需求：

代码：

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