如何在背景顶部创建曲线?
How to create a curve on the top of a background?
请帮我更改 .top 的切口,使其位于顶部而不是右侧。
如图所示。
非常感谢你提前。
我真的希望得到你的帮助,我是这个行业的新手。
源代码:
.box {
margin-top:120px;
width:200px;
height:100px;
background:white;
}
.box .top {
height:100px;
width:150px;
transform:translateY(-100%);
position:relative;
background:#fff;
}
.top:before,
.top:after{
content:"";
position:absolute;
top:0;
width:50px;
left:100%;
bottom:50%;
background:
radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
.top:after {
transform-origin:bottom;
transform:scaleY(-1);
}
body {
background:pink;
}
<div class="box">
<div class="top"></div>
</div>
您可以像下面这样调整您的代码:
.box {
margin-top:90px; /* make it at lealst the same as the height of the pseudo element */
width:200px;
height:100px;
background:white;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
bottom:100%;
width:50%;
left:0;
height:80px; /* adjust this to control the height */
background:
radial-gradient(50% 100% at bottom left, #fff 98%,#0000) top,
radial-gradient(50% 100% at top right , #0000 98%,#fff) bottom;
background-size:100% 50%;
background-repeat:no-repeat;
}
.box:after {
transform-origin:right;
transform:scaleX(-1);
}
body {
background:pink;
}
<div class="box">
</div>
请帮我更改 .top 的切口,使其位于顶部而不是右侧。
如图所示。
非常感谢你提前。
我真的希望得到你的帮助,我是这个行业的新手。
源代码:
.box {
margin-top:120px;
width:200px;
height:100px;
background:white;
}
.box .top {
height:100px;
width:150px;
transform:translateY(-100%);
position:relative;
background:#fff;
}
.top:before,
.top:after{
content:"";
position:absolute;
top:0;
width:50px;
left:100%;
bottom:50%;
background:
radial-gradient(100% 50% at top left, #fff 98%,transparent 100%) right,
radial-gradient(100% 50% at bottom right, transparent 98%,#fff 100%) left;
background-size:50% 100%;
background-repeat:no-repeat;
}
.top:after {
transform-origin:bottom;
transform:scaleY(-1);
}
body {
background:pink;
}
<div class="box">
<div class="top"></div>
</div>
您可以像下面这样调整您的代码:
.box {
margin-top:90px; /* make it at lealst the same as the height of the pseudo element */
width:200px;
height:100px;
background:white;
position:relative;
}
.box:before,
.box:after{
content:"";
position:absolute;
bottom:100%;
width:50%;
left:0;
height:80px; /* adjust this to control the height */
background:
radial-gradient(50% 100% at bottom left, #fff 98%,#0000) top,
radial-gradient(50% 100% at top right , #0000 98%,#fff) bottom;
background-size:100% 50%;
background-repeat:no-repeat;
}
.box:after {
transform-origin:right;
transform:scaleX(-1);
}
body {
background:pink;
}
<div class="box">
</div>