如何解决径向渐变,将一个部分分成两个 CSS 椭圆形状
我试图将我的部分一分为二,并将中间部分变成这个半椭圆形状。但我做不到。
.super {
background: linear-gradient(to right,grey 50%,red 50%);
}
<section class="super">
<div class="nice">
</div>
</section>
解决方法
不确定这是否是您想要的结果,但请尝试使用 clip-path
属性。
.super {
background-color: red;
height: 150px;
clip-path: circle(50% at 89% 54%);
}
<section class="super">
<div class="nice">
</div>
</section>
您可以使用以下工具生成自定义剪辑路径:https://bennettfeely.com/clippy/
,喜欢吗?
body
{
background-color:black;
}
#wrapper
{
width:600px;
height:175px;
background-color:#3596fb;
overflow:hidden;
}
#circle
{
background-color:white;
height:600px;
width:600px;
border-radius:50%;
margin-top:-30%;
margin-left:50%;
}
<div id="wrapper">
<div id="circle">
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。