如何在div上创建不平坦的圆形侧面? [英] How to create uneven rounded sides on a div?
问题描述
我一直在尝试制作具有不规则圆形边的DIV，如下所示:
我已经检查了一些解决方案，而最接近的解决方案是使用border-radius.我用过:
border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px;
这就是我所拥有的:
这怎么办?
您可以考虑 clip-path
.box {
height: 200px;
width: 200px;
background: blue;
-webkit-clip-path: circle(75% at 65% 10%);
clip-path: circle(75% at 65% 10%);
}
<div class="box">
</div>
或使用 radial-gradient
.box {
height: 200px;
width: 200px;
background: radial-gradient(circle at 65% 10%, blue 75%,transparent 75.5%);
}
<div class="box">
</div>
或在border-radius中使用伪元素并依靠溢出
.box {
height: 200px;
width: 200px;
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
left:-10%;
right:-10%;
bottom:10%;
background:blue;
border-radius:0 0 50% 100%;
}
<div class="box">
</div>
让我们不要忘记SVG解决方案(作为常规元素或背景)
svg {
display:inline-block;
}
.box {
display:inline-block;
height:200px;
width:200px;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='200' height='200' fill='blue'> <path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' /></svg>")0 0/100% 100% no-repeat;
}
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 64 64'
width='200' height='200'
fill='blue'>
<path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' />
</svg>
<div class="box">
</div>
这是一个很好的在线工具，可轻松调整SVG mask-image :
.box {
height: 200px;
width: 200px;
background:blue;
-webkit-mask-image: radial-gradient(circle at 65% 10%, #fff 75%,transparent 75.5%);
mask-image: radial-gradient(circle at 65% 10%, #fff 75%,transparent 75.5%);
}
<div class="box">
</div>
这是radial-gradient解决方案的另一种语法，不使用at，而Safari不支持
.box {
height: 200px;
width: 200px;
background:
radial-gradient(circle, blue 60.5%,transparent 61%) 35% 100%/200% 200% no-repeat;
}
<div class="box">
</div>
I've been trying to make a DIV with uneven rounded sides like this:
I've checked some solutions and the closest I can get to it is by using border-radius. I've used:
border-bottom-left-radius: 80%50px;
border-bottom-right-radius: 30%30px;
And this is what I've got:
How can this be done?
You can consider clip-path
.box {
height: 200px;
width: 200px;
background: blue;
-webkit-clip-path: circle(75% at 65% 10%);
clip-path: circle(75% at 65% 10%);
}
<div class="box">
</div>
Or use radial-gradient
.box {
height: 200px;
width: 200px;
background: radial-gradient(circle at 65% 10%, blue 75%,transparent 75.5%);
}
<div class="box">
</div>
Or use a pseudo element with border-radius and rely on overflow
.box {
height: 200px;
width: 200px;
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
left:-10%;
right:-10%;
bottom:10%;
background:blue;
border-radius:0 0 50% 100%;
}
<div class="box">
</div>
And let's don't forget the SVG solution (as a regular element or background)
svg {
display:inline-block;
}
.box {
display:inline-block;
height:200px;
width:200px;
background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='200' height='200' fill='blue'> <path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' /></svg>")0 0/100% 100% no-repeat;
}
<svg
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 64 64'
width='200' height='200'
fill='blue'>
<path d='M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z' />
</svg>
<div class="box">
</div>
Here is a good online tool to easily adjust the SVG http://jxnblk.com/paths/?d=M0 0 L0 28 C10 46 30 60 64 48 L64 0 Z
You can also consider mask-image:
.box {
height: 200px;
width: 200px;
background:blue;
-webkit-mask-image: radial-gradient(circle at 65% 10%, #fff 75%,transparent 75.5%);
mask-image: radial-gradient(circle at 65% 10%, #fff 75%,transparent 75.5%);
}
<div class="box">
</div>
Here is another syntax for the radial-gradient solution without the use of at which is not supported in Safari
.box {
height: 200px;
width: 200px;
background:
radial-gradient(circle, blue 60.5%,transparent 61%) 35% 100%/200% 200% no-repeat;
}
<div class="box">
</div>
这篇关于如何在div上创建不平坦的圆形侧面?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
