zoukankan      html  css  js  c++  java
  • CSS3 四边形 凹角写法

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .outer{
                position: absolute;
                left: 100px;
                top: 100px;
                width: 300px;
                height: 500px;
                background-color: #0a6ebd;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                border: 1px solid #0a6ebd;
            }
            .inner-1{
                width: 250px;
                height: 450px;
                box-sizing: border-box;
                background-color: #0da6ec;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid red;
                border-top-left-radius: 25px;
    
            }
            .inner-2{
                width: 200px;
                height: 400px;
                box-sizing: border-box;
                background-color: #00bcd4;
                position: relative;
                border: 1px solid red;
                border-top-left-radius: 25px;
    
            }
            .left-corner{
                width: 25px;
                height: 25px;
                /* border-radius: 100%; */
                border-bottom-right-radius: 100%;
                background-color: inherit;
                position: absolute;
                left: -1px;
                top: -1px;
                z-index: 10;
                border-bottom: 1px solid red;
                border-right: 1px solid red;
                box-sizing: border-box;
            }
        </style>
    </head>
    <body>
    
        <div class="outer">
    
            <div class="inner-1">
                <div class="left-corner" style="background-color: #0a6ebd;"></div>
                <div class="inner-2">
                    <div class="left-corner" style="background-color: #0da6ec;"></div>
                </div>
            </div>
        </div>
    </body>
    </html>

  • 相关阅读:
    ActiveMQ-在Centos7下安装和安全配置
    Servlet基础知识点
    Filter的执行顺序
    Dubbo-使用Maven构建Dubbo服务的可执行jar包
    Dubbo-Centos7管控台安装
    Spring 小知识点
    Zookeeper+ActiveMQ集群搭建
    Zookeeper在Centos7上搭建单节点应用
    SpringMVC+AJAX+JSON
    RocketMQ-Filer
  • 原文地址:https://www.cnblogs.com/arealy/p/7737062.html
Copyright © 2011-2022 走看看