我无法使用纯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>

---