【CSS】一个半圆如何裁掉某一部分

图片描述

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

回答:

    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;

}

回答:

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

回答:

    <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;

}

clipboard.png

回答:

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

回答:

可以这样写;不用图片:纯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>

回答:

用svg 路径画出形状再用样式填充颜色

回答:

canvas可以实现

以上是 【CSS】一个半圆如何裁掉某一部分 的全部内容, 来源链接: utcz.com/a/156229.html

回到顶部