使用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

回答

相關問題