如何在背景顶部创建曲线? [英] How to create a curve on the top of a background?

问题描述

请帮助我从.top更改切口，使其位于顶部而不是右侧.如图中所示.提前非常感谢您.我真的希望有您的帮助，我是这个行业的新手.源代码:

  .box {margin-top:120px;宽度:200像素；高度:100px;背景:白色；}.box .top {高度:100px;宽度:150px;转换:translateY(-100％);位置:相对；背景:#fff;}.top:之前，.top:之后{内容:"";位置:绝对；顶:0;宽度:50px;左:100％;底部:50％;背景:径向渐变(左上角为100％50％，#fff为98％，透明为100％)，径向渐变(右下为100％50％，透明为98％，#fff 100％)；背景大小:50％100％；背景重复:不重复；}.top:之后{transform-origin:bottom;transform:scaleY(-1);}身体 {背景:粉红色；}  

 < div class ="box">< div class ="top"></div></div>  

解决方案

您可以如下调整代码:

  .box {margin-top:90px;/*使它至少等于伪元素的高度*/宽度:200像素；高度:100px;背景:白色；位置:相对；}.box:之前，.box:之后{内容:"";位置:绝对；底部:100％;宽度:50％;左:0;高度:80px;/*调整此项以控制高度*/背景:径向渐变(左下方50％100％，#fff 98％，透明100％)顶部，径向渐变(右上50％100％，透明98％，#fff 100％)底部；背景大小:100％50％；背景重复:不重复；}.box:之后{transform-origin:right;transform:scaleX(-1);}身体 {背景:粉红色；}  

 < div class ="box"></div>  

Please help me change the cutout from .top so that it is on top and not on the right. As shown in the image. Thank you very much in advance. I really hope for your help, I'm new to this business. Source code: Source code

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

解决方案

You can adjust your code like below:

.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%,transparent 100%) top,
    radial-gradient(50% 100% at top right  , transparent 98%,#fff 100%) bottom;
  background-size:100% 50%;
  background-repeat:no-repeat;
}
.box:after {
  transform-origin:right;
  transform:scaleX(-1);
}
body {
  background:pink;
}

<div class="box">
</div>

这篇关于如何在背景顶部创建曲线?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！