使用CSS曲线顶部的div

-2

我想曲线顶部的div（如在这个设计中：https://dribbble.com/shots/1691707-Sleek-Multipurpose-Webs%20ite-Part-2/attachments/268709），特别是这个WP主题上的英雄形象下的白色div：https://themeisle.com/demo/?theme=Hestia。使用CSS曲线顶部的div

我曾尝试采用以下逻辑，我相信会给我我想要的东西，但每次尝试去可怕的错误：

.main-raised { 
 
margin: -200px -500px 0px -500px !important; 
 
border-radius: 1150px 1150px 0px 0px !important; 
 
z-index: 1 !important; 
 
} 
 

 
.hestia-features, .features { 
 
padding: 75px 0 55px; 
 
text-align: center; 
 
}

<div class="main main-raised"> 
 
      <section class="features hestia-features" id="features" data-sorder="hestia_features"> 
 
        <div class="container"> 
 
          <div class="row"> 
 
       <div class="col-md-8 col-md-offset-2"> 
 
               <h2 class="hestia-title">Core features</h2> 
 
                     <h5 class="description">Example text</h5> 
 
             </div> 
 
      </div> 
 
        <div class="hestia-features-content"> 
 
    <div class="row">    <div class="col-md-4 feature-box"> 
 
       <div class="info hestia-info"> 
 
              <a href="#"> 
 
            <div class="icon" style="color:#e91e63"> 
 
      <i class="fa fa-wechat"></i> 
 
            </div> 
 
                           <h4 class="info-title">Responsive</h4> 
 
                      </a> 
 
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
             </div> 
 
      </div> 
 
          <div class="col-md-4 feature-box"> 
 
       <div class="info hestia-info"> 
 
              <a href="#"> 
 
            <div class="icon" style="color:#00bcd4"> 
 
      <i class="fa fa-check"></i> 
 
            </div> 
 
                           <h4 class="info-title">Quality</h4> 
 
                      </a> 
 
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
             </div> 
 
      </div> 
 
          <div class="col-md-4 feature-box"> 
 
       <div class="info hestia-info"> 
 
              <a href="#"> 
 
            <div class="icon" style="color:#4caf50"> 
 
      <i class="fa fa-support"></i> 
 
            </div> 
 
                           <h4 class="info-title">Support</h4> 
 
                      </a> 
 
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> 
 
             </div> 
 
      </div> 
 
      </div><!-- /.row --><div class="row"></div>  </div> 
 
           </div>

任何人都可以请告知如何可以实现？谢谢。

来源

2017-09-04 charlieg007

你尝试过什么自己得到这个工作？在发布问题之前，预计您已经***研究了您的问题，并尝试亲自编写代码***。如果你遇到* *特定*的东西，请返回并在[最小，完整和可验证示例]（https://stackoverflow.com/help/mcve）中包含你已经尝试过的内容以及相关代码的摘要我们可以帮助。请回顾[我如何问一个好问题]（https://stackoverflow.com/help/how-to-ask）。 – FluffyKitten

请修改您的问题以添加任何更新，以便其他人也可以看到他们，并且他们不会在评论中丢失。 – FluffyKitten

我已经完成了这个 - 谢谢。 – charlieg007

您只需要使用border-radius属性。

您可以使用像这样的简写值来修改每个角点。

border-radius：15px 15px 0 0;

这将给出左上角和右上角各半径为15px，底角各半径为0。

进一步阅读这里，https://www.w3schools.com/cssref/css3_pr_border-radius.asp

来源

2017-09-05 01:46:38

您发布的示例是使用border-radius：6px 6px 0 0;只要看看他们的CSS使用您的浏览器督察。 –

我已经进步了相对较远，但现在有一个可怕的溢出问题与边界半径属性。任何人都可以请帮助删除这个？溢出：隐藏不会影响任何内容。谢谢。 – charlieg007

使用CSS曲线顶部的div

回答

相关问题