我無法使用純CSS檢索曲面邊框效果

Question

我必須重新生成一個模擬框，其頂部邊框的中間有一條曲線。

像這上面。我無法弄清楚我該怎麼做。我認爲有一些位置和邊界設置。我一直在嘗試2個小時，但我不能。

我在網上一些現成的代碼，但我無法使它適應我的需要。 下面的代碼：

<div id="message-holder"></div> 

#message-holder { 
    margin-top:50px; 
    width:300px; 
    height:300px; 
    left: 37%; 
    background: #F9EDEF; 
    position:relative; 
    border:1px solid #edb2b7; 
} 

#message-holder:before, #message-holder:after{ 
    content:""; 
    position:absolute; 
    top:24px; 
    left:110px; 
    border-bottom:25px solid #f9edef; 
    border-left:25px solid transparent; 
    border-right:25px solid #f9edef; 
} 

#message-holder:before{ 
    top:25px; 
    border-bottom-color:#edb2b7; 
} 

這是完全錯誤的！

有人能幫助我嗎？

Answer 1

您可以使用CSS邊框顏色/寬怎麼實現這樣的效果。

下面是一個例子。

要控制邊緣的長度，你可以在裏面更改值：after僞元素

border-right-width: 100px; 

body { 
 
    background-color: #153050; 
 
} 
 
#header { 
 
    background-color: #0D4585; 
 
    padding: 10px 20px 20px; 
 
    border-top-right-radius: 20px; 
 
    border-bottom: 1px solid darkblue; 
 
    margin-top: 50px; 
 
    position: relative; 
 
    width: 50%; 
 
} 
 

 
#header:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -20px; 
 
    left: 0; 
 
    border: 20px solid #0D4585; 
 
    border-top-left-radius: 20px; 
 
    border-bottom-color: transparent; 
 
    border-right-color: transparent; 
 
    border-right-width: 0; 
 
    border-bottom-width: 0; 
 
} 
 

 
#header:after { 
 
    content: ''; 
 
    position: absolute; 
 
    top: -40px; 
 
    left: 20px; 
 
    width: 30%; 
 
    border: 20px solid rgba(255, 255, 255, 0); 
 
    border-right-color: transparent; 
 
    border-top-color: transparent; 
 
    border-bottom-color: #0D4585; 
 
    border-right-width: 100px; 
 
    border-left-width: 0; 
 
} 
 

 
#header h3 { 
 
    color: #fff; 
 
    margin: 0; 
 
}

<div id="header"> 
 
    <h3>Heading</h3> 
 
</div>

---