如何在CSS中创建彩色圆顶背景

Question

目前,当我将border-radius属性应用于彩色div 时,我的网站看起来像这样:

但我希望它看起来像这样:

我知道通过调整border-radius是不够的,任何想法我怎么能实现上述？

PS:在我的情况下使用图像背景是不可行的

Answer 1

圆顶需要一个负的左右边距,边界半径应该被改进.这应该够了吧.将其包装在overflow: hidden容器中会阻止水平滚动条.

.dome {
  margin: 10% -25% 0; 
  border-top-left-radius: 100%;
  border-top-right-radius: 100%; 
  padding-bottom: 50%;
}
.gradientbg {
  /* gradient generated with http://www.colorzilla.com/gradient-editor/ using #81badd and #ae85ff*/
  background: rgb(129,186,221);
  background: -moz-linear-gradient(top, rgba(129,186,221,1) 0%, rgba(174,133,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  background: linear-gradient(to bottom, rgba(129,186,221,1) 0%,rgba(174,133,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81badd', endColorstr='#ae85ff',GradientType=0 );
}
.container {
  overflow: hidden;
}

<div class="container">
  <div class="dome gradientbg"></div>
</div>