一个半圆如何裁掉某一部分

zhishidaxue1984

36874963

发布于
2017-07-17

图片描述

例如这个图，一个透明的半圆，再扣出来一个半圆，如何实现

css3 javascript

阅读 4.4k

7 个回答

得票最新

zzCute

1.1k137

发布于
2017-07-17

    div{
        width: 50px;
        height: 25px;
        border-width: 25px 25px 0 25px;
        border-color: blue;
        border-style: solid;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        }

零零零

35732138

发布于
2017-07-17

背景设置一张图，用canvas是去画设置个透明度

yzllee

2.9k1324

发布于
2017-07-17

更新于
2017-07-17

    <div id="container">
        <div id="circle"></div>
    </div>

        #container{
            width: 200px;
            height: 90px;
            overflow: hidden;
        }
        #circle {
            width: 100px;
            height: 100px;
            border-radius: 50%;
             -webkit-border-radius: 50%;
            -moz-border-radius: 50%; 
            border: 40px red solid;
        }

张伟伟3x3

35814

发布于
2017-07-17

更新于
2017-07-17

使用svg或者css3的径向渐变、border都可以。但是没法扣的

xiaopengji

6411719

发布于
2017-07-20

可以这样写；不用图片：纯css;
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .box{position:relative;width:200px;height:200px;overflow:hidden;margin:50px auto;}
        .box:after{background-color:#fff;content:'';width:200px;height:100px;position:absolute;left:0;top:100px;}
        .box span{display:block;}
        .a{width:200px;height:200px;background-color:red;border-radius:50% ;}
        .b{position:absolute;top:25px;left:25px;width:150px;height:150px;background-color:#fff;border-radius:50%;}
    </style>
</head>
<body>
    <div class="box">
        <span class="a"></span>
        <span class="b"></span>
    </div>
</body>

</html>