用css歪斜

Question

我试图用border-radius-left-top和border-radius-left-right来扭曲我的div，但我认为这不是解决方案。要了解我要做的事情，请点击此处图片：

border-radius: 50% / 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

Answer 1

您的border-radius具有此形状，因为圆的高度和宽度不同（如粉红色一样）。为了正确的形状，它应该像方形。高度应该等于宽度。使用伪元素执行此操作（第三个div）：

＆＃13;

＆＃13;

*, *:before, *:after{
  box-sizing: border-box;
}
div {
  position: relative;
  height: 200px;
  padding-bottom: 70px;
}

.one {
  background-color: #fcfdfe;
}

.one:before {
  content: '';
  position: absolute;
  border-radius: 50%;
  height: 100%;
  width: 100%;
  background-color: pink;
}

.two {
  margin-top: -70px;
  padding-top: 70px;
  padding-bottom: 70px;
  background-color: #edf3f8;
  border-top-left-radius: 200% 240px;
  border-top-right-radius: 200% 240px;
}

.three {
  position: relative;
  background-color: #10538c;
}
.three-border{
  position:absolute;
  overflow:hidden;
  height:70px;
  top:-70px;
  left:0;
  right:0;
}
.three-border:before {
  content: '';
  position: absolute;
  border-radius: 50%;
  height: 300vw;
  width: 300vw;
  margin: 0 -100vw;
  background-color: #10538c;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" rel="stylesheet"/>
<div class="one">1111</div>
<div class="two">2222</div>
<div class="three">
  <div class="three-border"></div>
  3333
</div>

＆＃13;

＆＃13;

＆＃13;