Html 带有纯css边框的三角形

我需要建立一个信息持有人与提示的形式，三角形与边界。我已经设法建立了提示：

我相信它可以用一个HTML对象来完成，我只是不知道怎么做。你能帮忙吗

我已经添加了我正在尝试构建的消息容器的示例

这里<代码>:after和

:before

称为伪元素

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

---

和你的小提琴相比，最终的结果应该是什么样的呢？太棒了，非常感谢！但这似乎很复杂。我需要了解它是如何工作的，这样我才能将它塑造成我上传的图像上的形式。你能提供一个简短的描述吗？谢谢下面是一篇关于如何使用

：before

和

：after

伪元素的精彩文章。下面是一个接近您所需的更新。现在，由于它们是伪元素，如果没有

#消息持有者

它们就无法独立存在。请参见，当我们使用

left:50%

时，左侧从尖端的起点开始，如果将尖端的宽度添加到其上，则它实际上并不居中，而是稍微偏右<代码>-webkit转换：translateX（-50%）将尖端推至其总宽度的

-50%

。您也可以使用类似的概念进行垂直中间对齐。请检查此项。它有多个垂直对齐选项。

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

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

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