如何在CSS中創建柔和曲線？

Question

是否有可能像使用CSS（無圖像/ svg）在示例圖像中創建曲線塊？

Answer 1

.curveArea { 
 
    width: 500px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
} 
 

 
.mainBox { 
 
    height: 100%; 
 
    background: #fff; 
 
    overflow: hidden; 
 
} 
 

 
.curveSection { 
 
    width: 200%; 
 
    height: 100%; 
 
    border-radius: 50%; 
 
    background: #e44627; 
 
    top: 25%; 
 
    left: -50%; 
 
    right: 0; 
 
    position: relative; 
 
    border-top: 10px solid #fdedea; 
 
}

<div class="curveArea"> 
 
    <div class="mainBox"> 
 
    <div class="curveSection"></div> 
 
    </div> 
 
</div>

使用這一個，我希望這將是有益的

Answer 2

您將使用border-radius但你需要做這樣的事情變得有點創意：一個比你的內容一個單獨的元素border-radius: 50%/2rem 2rem 0 0;。

.container { 
 
    width: 100%; 
 
    overflow-x: hidden; 
 
} 
 
.my-cool-el { 
 
    background-color: #f00; 
 
    color: #fff; 
 
    margin-top: 2rem; 
 
    padding: 2rem 0; 
 
    position: relative; 
 
    text-align: center; 
 
} 
 
.my-cool-el:before { 
 
    background-color: #f00; 
 
    border-radius: 50%/2rem 2rem 0 0; 
 
    content:''; 
 
    display: block; 
 
    height: 2rem; 
 
    left: 0; 
 
    position: absolute; 
 
    top: -2rem; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="my-cool-el"> 
 
    Ready To Get Started 
 
    </div> 
 
</div>

Answer 3

嘗試使用這樣的：

div{ 
    border-radius:15px 100px 100px 5px; 
    background:#73AD21; 
    padding:20px; 
    width:200px; 
    height:150px; 
} 

Answer 4

您可以添加這個形狀pseudoelement去除需要額外的HTML塊

.curved-demo { 
 
    position: relative; 
 
    overflow: hidden; 
 
    
 
    /* just styles for demo */ 
 
    font-family: Arial; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    padding-top: 100px; 
 
    padding-bottom: 100px; 
 
    color: #fff; 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
} 
 

 
.curved-demo:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    left: -50%; 
 
    top: 0; 
 
    width: 200%; 
 
    bottom: 0; 
 
    background-color: #e44627; 
 
    border-top: 15px solid #fdedea; 
 
    border-radius: 50% 50% 0 0; 
 
    z-index: -1; 
 
} 
 

 
/* just styles for demo */ 
 
.curved-demo > button { 
 
    margin-top: 20px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    padding: 10px 20px; 
 
    border: 0; 
 
    text-transform: inherit; 
 
    font-weight: bold; 
 
    border-radius: 3px; 
 
    font-size: inherit; 
 
}

<div class="curved-demo"> 
 
    Ready to get started 
 
    <button>Schedule a demo</button> 
 
</div>