英文:
Does anyone have an idea on how to make this shape on the container?
问题
我应该使用border-radius，clip-path还是像这样的巫术？
我必须让容器看起来像下面的照片：
英文:
Should I use border-radius, clip-path or what kind of wizardry is this?
I have to make the container to look like in the photo below:
答案1
得分: 2
使用遮罩：
.box {
--s: 50px; /* 控制曲线的弯曲程度（可以是百分比） */
margin: 20px;
height: 250px;
background: linear-gradient(45deg, red, blue);
-webkit-mask:
radial-gradient(55% var(--s) at top ,#0000 99%,#000) top,
radial-gradient(55% var(--s) at bottom,#0000 99%,#000) bottom;
-webkit-mask-size: 100% 51%;
-webkit-mask-repeat: no-repeat;
}
<div class="box"></div>
英文:
Use mask:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.box {
--s: 50px; /* control the curvature (can be percentage) */
margin: 20px;
height: 250px;
background: linear-gradient(45deg, red, blue);
-webkit-mask:
radial-gradient(55% var(--s) at top ,#0000 99%,#000) top,
radial-gradient(55% var(--s) at bottom,#0000 99%,#000) bottom;
-webkit-mask-size: 100% 51%;
-webkit-mask-repeat: no-repeat;
}
<!-- language: lang-html -->
<div class="box"></div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论