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

---