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

    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>