DIV+CSS如何在一个矩形中挖去一个半圆?

现在需要做一个登录框,背景颜色是随机的,这就要求登录框是透明或者半透明的,因为种种原因,【不能使用背景图】,SO,问题来了! 怎样在一个矩形中切除一个半圆的形状?求给个解决方案。谢谢了!{ps:js动态修改背景色暂不考虑}

图片描述

阅读 17k
8 个回答

要挖个半圆没办法,但是可以通过多个div拼接来做出效果
半圆用一个透明div来做,登陆框的背景用透明圆形div的border来模拟
看了前面几个回答提主的描述,感觉应该是要这种效果


图片描述

css

.square, .square > div { box-sizing: border-box; }
.square { 
    width: 300px; 
    position: fixed; 
    top: calc(50vh - 200px);
    left: calc(50vw - 150px);
    overflow: hidden;
}
.square > .s-top { 
    border: 1px solid #fff;
    height: 170px;
    border-radius: 5px 5px 0 0;
    border-width: 1px 1px 0 1px; 
}
.square > .s-middle { 
    border-left: 1px solid #fff; 
    height: 60px;
}
.square > .s-bottom { 
    border: 1px solid #fff;
    height: 170px;
    border-radius: 0 0 5px 5px;
    border-width: 0px 1px 1px 1px; 
}
.square > .s-half-circle { 
    border: 1px solid #fff;
    position: absolute;
    width: 30px;
    height: 60px;
    border-width: 1px 0px 1px 1px;
    border-radius: 30px 0 0 30px;
    top: calc(50% - 30px);
    right: 0;
}
.square > .s-background {
    border: 360px solid rgba(255,255,255,0.3);
    position: absolute;
    width: 780px;
    height: 780px;
    border-radius: 50%;
    top: calc(50% - 390px);
    right: -390px;
}
.circle { 
    width: 50px;
    height: 50px;
    border: 1px solid #fff;
    border-radius: 50%;
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% + 125px);
    background-color: rgba(255,255,255,.3);
    box-sizing: border-box;
}

html

<div class="square">
    <div class="s-top"></div>
    <div class="s-middle"></div>
    <div class="s-bottom"></div>
    <div class="s-half-circle"></div>
    <div class="s-background"></div>
</div>
<div class="circle"></div>

这个很简单呀,html5可以,首先用一个div设置圆角,只显示左边的边,右边的让它隐藏起来,就是表单的边框过度的那个半圆,然后另一个div直接做成圆形。

最先想到圆角50%可以实现半圆,不过你这个是透明的,不好盖起来。是否考虑svg,感觉svg理论可行

纯CSS实现……目前没想到办法。不过如果是怕图片加载延迟的话,考虑使用 DATA URL 呢?

如果H5圆角,其他都图片

圆角后有三个边框:白、蓝、白
最里面的白色不需要遮罩,外侧的蓝色和白色边框需要用一个与背景色相同的矩形遮住右半边
三个z-index
内部的蓝底白框在最上面
右侧的矩形在中间
下面的蓝底白框在最下面

<div class="a"></div>
    .a{
        width: 240px;
        height: 400px;
        background: #ccc;
        position: relative;
        overflow: hidden;
    }
    .a:after{
        content: "";
        position: absolute;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: #0cf;
        right: -40px;
        top: 160px;

    }
    三层的效果按照楼上说的就可以啦。
<style type="text/css">
    *{padding:0; margin:0; list-style:none;}
    body{ background:#999;}
    .main{ position:relative; width:300px; height:400px; margin:10px auto; box-shadow:0 0 4px #fff;}
    .div1{ position:relative; overflow:hidden;}
    .div2{ width:300px; height:400px; border-radius:5px; position:relative; background:#ccc; box-sizing:border-box;border:1px solid #fff;}
    .div3{ position:absolute; width:60px; height:60px; border:1px solid #fff; right:-31px; border-radius:50%; top:50%; margin-top:-31px; background:blue; z-index:1;}
    .div4{ position:absolute; background:blue; width:50px; height:50px; border-radius:50%; right:-26px; top:50%; margin-top:-26px; border:1px solid #fff; z-index:2;}
</style>

<body>
    <div class="main">
        <div class="div1">
          <div class="div2"></div>
          <div class="div3"></div>    
        </div>
        <div class="div4"></div>
    </div>
</body>
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题