Html 我能'；t使用纯css检索曲线边界效果 我必须复制一个模型，其中有一个中间有曲线的顶部边框。

像上面这样。我不知道该怎么做。我认为有一些位置和边界设置。我已经试了两个小时了，但是不行

我在网上有一些现成的代码，但我不能适应我的需要。 代码如下：

<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;
}

#消息持有者{
边缘顶部：50px；
宽度：300px；
高度：300px；
左：37%；
背景:#F9EDEF；
位置：相对位置；
边框：1px实心#edb2b7；
}
#留言者：之前，#留言者：之后{
内容：“；
位置：绝对位置；
顶部：24px；
左：110像素；
边框底部：25px实心#f9edef；
左边框：25px实心透明；
右边框：25px实心#f9edef；
}
#留言人：之前{
顶部：25px；
边框底色：#edb2b7；
}

这是完全错误的

---

有人能帮我吗？

你可以使用CSS边框颜色/宽度技巧来达到这样的效果

这里有一个例子

若要控制边的长度，可以在pseudo元素内部：after中更改值

    border-right-width: 100px;

正文{
背景色：#153050；
}
#标题{
背景色：#0D4585；
填充：10px 20px 20px；
边框右上角半径：20px；
边框底部：1px实心深蓝色；
边缘顶部：50px；
位置：相对位置；
宽度：50%；
}
#标题：之前{
内容：''；
位置：绝对位置；
顶部：-20px；
左：0；
边框：20px实心#0D4585；
边框左上半径：20px；
边框底色：透明；
右边框颜色：透明；
右边框宽度：0；
边框底宽：0；
}
#标题：之后{
内容：''；
位置：绝对位置；
顶部：-40px；
左：20px；
宽度：30%；
边框：20px实心rgba（255,255,255,0）；
右边框颜色：透明；
边框顶色：透明；
边框底色：#0D4585；
右边框宽度：100px；
边框左宽度：0；
}
#收割台h3{
颜色：#fff；
保证金：0；
}

标题

请提供您在帖子中添加的代码。非常感谢，这正是我想要的。我能回答一些问题吗？有没有一个教程可以解释所有这些技术，以便自己能够创建类似的东西？有很多关于css边框三角形的教程。如。你可以用谷歌搜索，如果你给每个边框一个不同的颜色而不是透明的话，这会有很大帮助。