CSS实战二：仿gitee登陆页面(带尖角的小长方形）

本文链接：https://blog.csdn.net/News777/article/details/119416643

成品展示

全局

在这里插入图片描述

下方栏：更多

在这里插入图片描述

代码

HTML代码

<body>
    <div class="container">
        <div class="main">
            <div class="main_left">
                <div class="top">
                    <div class="top_img">
                        <img src="./logo.svg" alt="">
                    </div>
                    <h2>云端软件开发协作平台</h2>
                </div>
                <div class="middle">
                    <p class="mid_title">xxx&nbsp;&nbsp; &nbsp;xxxxxxxxx</p>
                    <p class="mid_content">类似 GitHub 这样的代码托管服务，是软件研发过程中不可缺少的一环，在国内目前还没有特别好的服务，Gitee 很好地填补了这个空白。一起努力，越来越好，为中国技术人群提供更多更贴心的服务。</p>
                </div>
                <div class="bottom">
                    <a href="javascript:void(0)">
                        <span class="bgimg"><i class="fab fa-hotjar"></i></span>
                        <div class="bottom_content">
                            <strong>Gitee 企业版</strong>
                            <span>&nbsp;&nbsp;-&nbsp;&nbsp; 企业级软件协作开发管理平台<i style="margin-left:5px;" class="far fa-arrow-alt-circle-right"></i></span>
                        </div>
                    </a>
                </div>
            </div>
            <div class="main_right">
                <div class="title_reg">
                    <h2>登录</h2>
                    <p>没有账号？<a href="javascript:void(0)">点击注册</a></p>
                </div>
                <div class="inp_user">
                    <input type="text" name="" id="" placeholder="手机/邮箱/个人空间地址">
                    <input type="password" name="" id="" placeholder="请输入密码">
                </div>
                <div class="ckx_user">
                    <input type="checkbox" name="" id=""><span>记住我</span>
                    <a href="javascript:void(0)">短信验证登录</a>
                </div>
                <div class="confirm_user">
                    <button>登录</button>
                    <span><a href="javascript:void(0)">已有账号,忘记密码?</a></span>
                </div>
                <div class="login_way">
                    <div class="osc">
                        <a href="javascript:void(0)"> <img src="./oschina-circle.png" alt="oschina-circle" width="32" height="32">
                            <span>使用OSChina账号登录</span></a>
                    </div>
                    <div class="others">
                        <hr>
                        <div class="target">
                            <a href="javascript:void(0)"><img src="./aliyun.png" width="32" height="32" alt=""></a>
                            <a href="javascript:void(0)"><img src="./logo-gitlab.png" width="32" height="32" alt=""></a>
                            <a href="javascript:void(0)"><img src="./华为.png" width="32" height="32" alt=""></a>
                            <a href="javascript:void(0)"><img src="./Logo GitHub.png" width="32" height="32" alt=""></a>
                            <span class="more">
                                <a href="javascript:void(0)"><img src="./更多 (2).png" width="32" height="32" alt=""></a>
                                <span>
                                <a href="javascript:void(0)"><img src="./QQ.png" alt="" width="32" height="32"></a>
                                <a href="javascript:void(0)"><img src="./we-chat.png" alt="" width="32" height="32"></a>
                                </span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-width: 1040;
    position: relative;
}

.container::before,
.container::after {
    position: absolute;
    /* background-size: cover; */
    content: "";
    bottom: 0;
    z-index: -2;
    background-size: contain;
    background-repeat: no-repeat;
}

.container::before {
    width: 394px;
    height: 468px;
    left: 0;
    background-image: url(./left-bottom.png);
}

.container::after {
    width: 487px;
    height: 412px;
    right: 0;
    background-image: url(./right_bottom.png);
}

.main {
    min-width: 1000px;
    min-height: 564px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    z-index: 1;
    display: flex;
}

.main .main_left {
    flex: 50%;
    min-width: 500px;
    min-height: 564px;
    min-width: none;
    display: flex;
    position: relative;
    justify-content: space-around;
    flex-direction: column;
    background: linear-gradient( 0deg, #3a485a 0%, #607089 100%);
    z-index: 2;
    padding: 80px 80px 48px;
}

.main_left::before,
.main_left::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
}

.main_left::before {
    background-image: url(./left-top.png);
    background-repeat: no-repeat;
    background-position: 0 0;
}

.main_left::after {
    background-image: url(./right-top.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.top_img img {
    width: 144px;
}

.top h2 {
    color: #FFFFFF;
    margin-top: 20px;
}

.middle {
    padding-top: 20px;
    padding-bottom: 100px;
}

.middle p {
    font-size: 14px;
}

.middle .mid_title {
    color: #677588;
}

.middle .mid_content {
    color: #fff;
    width: 340px;
    margin-top: 18px;
}

.bottom {
    width: 340px;
    border-top: 1px solid #687382;
    z-index: 5;
    padding-top: 50px;
}

.bottom a {
    text-decoration: none;
    color: #fff;
    font-size: 15px;
    text-align: center;
    position: relative;
}

.bottom .bgimg {
    position: absolute;
    top: -12px;
    left: 100px;
}

.bottom_content {
    cursor: pointer;
}

.bottom_content:hover {
    color: #abaeb3;
}

.main .main_right {
    flex: 50%;
    min-width: 500px;
    min-height: 564px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 64px 70px 48px;
    color: #4048A0;
}

.title_reg {
    position: relative;
    padding-bottom: 40px;
}

.title_reg>p {
    position: absolute;
    right: 0;
    font-size: 14px;
}

.title_reg>p a {
    text-decoration: none;
    color: #4048A0;
}

.title_reg>p a:hover {
    color: #84D2FF;
}

.inp_user input {
    display: block;
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    padding: 9px 14px;
    opacity: 0.5;
    outline: 0;
    font-size: 1rem;
}

.ckx_user {
    position: relative;
    font-size: 14px;
}

.ckx_user input {
    cursor: pointer;
    zoom: 1.3;
    vertical-align: -1px;
}

.ckx_user span {
    display: inline-block;
    margin-left: 5px;
}

.ckx_user a {
    position: absolute;
    right: 0;
    text-decoration: none;
    color: #4048A0;
}

.confirm_user {
    margin-top: 20px;
}

.confirm_user button {
    width: 100%;
    height: 38px;
    letter-spacing: 15px;
    text-indent: 15px;
    font-size: 18px;
    color: #FFFFFF;
    background: #FE7300;
    border: 0;
    cursor: pointer;
    margin-bottom: 20px;
}

.confirm_user span {
    display: block;
    text-align: center;
}

.confirm_user span>a {
    text-decoration: none;
    color: #4048A0;
    font-size: 14px;
}

.login_way {
    margin-top: 45px;
}

.osc {
    text-align: center;
    margin-bottom: 30px;
}

.osc a {
    text-decoration: none;
}

.osc a>span {
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    margin-left: 10px;
    color: #4048A0;
}

.others {
    position: relative;
}

.others hr {
    opacity: 0.5;
    line-height: 0;
    text-align: center;
    z-index: -1;
}

.others hr::after {
    position: absolute;
    left: 130px;
    top: -5px;
    bottom: 0;
    padding: 0 15px;
    background: #FFFFFF;
    content: "其他方式登录 ";
    z-index: 9999;
    font-size: 14px;
}

.target {
    margin-top: 18px;
    margin-left: 20px;
    position: relative;
    white-space: nowrap;
}

.target a {
    padding-right: 40px;
}

.target .more:hover span {
    display: inline;
}

.more>a {
    display: inline-block;
}

.more span {
    display: none;
    position: absolute;
    inset: -40px 95px;
    z-index: 999;
    width: 200px;
    height: 100px;
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.more span::before,
.more span::after {
    width: 0px;
    height: 0px;
    border: transparent solid;
    position: absolute;
    left: 100%;
    content: ""
}

.more span::before {
    border-width: 10px;
    border-left-color: #fff;
    top: 44px;
}

.more span::after {
    border-width: 8px;
    border-left-color: #fff;
    top: 46px;
}

.more span a {
    display: inline-block;
    margin: 10px 10px;
    padding: 0;
}

.more:hover span {
    display: block;
}

小插件

带尖角的卡片(长方形）

在这里插入图片描述

<style>
    .gg {
            width: 200px;
            height: 100px;
            position: relative;
            background: #fff;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
        }
        
        .gg::after {
            position: absolute;
            width: 0;
            height: 0;
            content: "";
            left: 100%;
            border: transparent solid;
            border-left-color: #fff;
            border-width: 9px;
            top: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
    
    <div class="gg"></div>