问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
haidun999999
    1032410

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

    图片描述

    csshtml
    阅读 17.2k
    8 个回答
    得票最新
    头像
    lostpig
      2.1k126
      ✓ 已被采纳

      要挖个半圆没办法，但是可以通过多个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>
      头像
      xxfaxy
        1.6k42370552

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

        头像
        P_Chou水冗
          5.1k52132

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

          头像
          边城
            59.8k157274

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

            头像
            爪哇大法师
              4612

              如果H5圆角，其他都图片

              头像
              海带丝阿飞
                116112

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

                头像
                circle
                  73
                  <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;

    }
    三层的效果按照楼上说的就可以啦。
                  头像
                  prototype_eva
                    1.1k23657
                    <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>
                    撰写回答
                    你尚未登录，登录后可以
                    • 和开发者交流问题的细节
                    • 关注并接收问题和回答的更新提醒
                    • 参与内容的编辑和改进，让解决方法与时俱进
                    推荐问题