CSSを使用しているdivのカーブトップ

Question

divの上部をカーブさせようとしています（このデザインのように：https://dribbble.com/shots/1691707-Sleek-Multipurpose-Webs%20ite-Part-2/attachments/268709）、このWPテーマのヒーローイメージの下の白いdiv：https://themeisle.com/demo/?theme=Hestiaです。

私は私が欲しいものを私に与えると信じて次のロジックを適用しようとしましたが、それぞれの試行で恐ろしくうまくいかいる

：

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

誰がどのようにこのことをお勧めしてくださいすることができ達成することができます？ありがとう。

Answer 1

border-radiusプロパティを使用するだけで済みます。

このように簡略化された値を使用して各コーナーを修正することができます。

border-radius：15px 15px 0 0;

これは、左上角と右上角にそれぞれ15pxの半径を与え、下隅にそれぞれ半径0を与えます。

はさらに、ここであなたはこの仕事を得るために自分自身を試してみましたが、何https://www.w3schools.com/cssref/css3_pr_border-radius.asp