Html 绳索下拉菜单中工具提示的Css

我想为下拉列表制作一个工具提示，但箭头中有问题，请找人按我想要的方式定位，谢谢

这是我得到的

我希望它看起来像这样

<div class="err-tip" id="wrapper-err">
    <span class="err-close">X</span>
    <p>hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc.</p>
</div>

这是我的CSS代码

<style>
    #wrapper-err {
      position: absolute;
      display: inline-block;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2222;
      width:210px;
      height:90px;
      margin-top:2em;
      margin-left:2em;
}

.err-tip {
    background-color: #D03B3E;
    color:#fff;
    padding:0.5em;
}

.err-tip::before {
      content: "";
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 18px solid #D03B3E;
      position: absolute;
      top: -18px;
      left: 50%;
      margin-left: -4px;
      display: block;

}

.err-tip div{
    margin: 0px;
    border: 0px none;
    font: inherit;
    vertical-align: baseline;
    outline: medium none;
}
.err-close{
  float: right;
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
  border: 1px dotted;
  margin: 0.2em;
}
.err-tip p{
  margin-right: 0.4em;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

</style>

#包装错误{
位置：绝对位置；
显示：内联块；
显示器：flex；
对齐项目：居中；
证明内容：中心；
z指数：2222；
宽度：210px；
高度：90px；
边缘顶部：2米；
左边距：2米；
}
.错误提示{
背景色：#D03B3E；
颜色：#fff；
填充：0.5em；
}
.err提示：：之前{
内容：“；
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：18px实心#D03B3E；
位置：绝对位置；
顶部：-18px；
左：50%；
左边距：-4px；
显示：块；
}
.错误提示div{
边际：0px；
边框：0px无；
字体：继承；
垂直对齐：基线；
大纲：中无；
}
.差一点{
浮动：对；
位置：绝对位置；
顶部：1px；
右：1px；
光标：指针；
边框：1个点；
边缘：0.2米；
}
.错误提示p{
右边距：0.4em；
边缘顶部：0.4em；
边缘底部：0.4em；
}

HTML

<div class="err-tip" id="wrapper-err">
    <span class="err-close">X</span>
    <p>hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc.</p>
</div>

X
hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc

只需更改箭头边框，如下所示：

.err-tip::before {
      content: "";
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 18px solid #D03B3E; /* changed from top to bottom */
      position: absolute;
      top: -18px;
      right: 25px; /* change the horizontal position */
      margin-left: -4px;
      display: block;
}

以下是一个片段：

#包装错误{
位置：绝对位置；
显示：内联块；
显示器：flex；
对齐项目：居中；
证明内容：中心；
z指数：2222；
宽度：210px；
高度：90px；
边缘顶部：2米；
左边距：2米；
}
.错误提示{
背景色：#D03B3E；
颜色：#fff；
填充：0.5em；
}
.err提示：：之前{
内容：“；
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框底部：18px实心#D03B3E；
位置：绝对位置；
顶部：-18px；
右：25px；
左边距：-4px；
显示：块；
}
.错误提示div{
边际：0px；
边框：0px无；
字体：继承；
垂直对齐：基线；
大纲：中无；
}
.差一点{
浮动：对；
位置：绝对位置；
顶部：1px；
右：1px；
光标：指针；
边框：1个点；
边缘：0.2米；
}
.错误提示p{
右边距：0.4em；
边缘顶部：0.4em；
边缘底部：0.4em；
}

X
文本

@Micheal很乐意帮忙：）