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