现在需要做一个登录框,背景颜色是随机的,这就要求登录框是透明或者半透明的,因为种种原因,【不能使用背景图】,SO,问题来了! 怎样在一个矩形中切除一个半圆的形状?求给个解决方案。谢谢了!{ps:js动态修改背景色暂不考虑}
现在需要做一个登录框,背景颜色是随机的,这就要求登录框是透明或者半透明的,因为种种原因,【不能使用背景图】,SO,问题来了! 怎样在一个矩形中切除一个半圆的形状?求给个解决方案。谢谢了!{ps:js动态修改背景色暂不考虑}
圆角后有三个边框:白、蓝、白
最里面的白色不需要遮罩,外侧的蓝色和白色边框需要用一个与背景色相同的矩形遮住右半边
三个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>
3 回答4.9k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.5k 阅读
3 回答2.1k 阅读
2 回答1k 阅读✓ 已解决
要挖个半圆没办法,但是可以通过多个div拼接来做出效果
半圆用一个透明div来做,登陆框的背景用透明圆形div的border来模拟
看了前面几个回答提主的描述,感觉应该是要这种效果
图

css
html