Html 如何将箭头添加到div？

我正在尝试用箭头为div创建错误标签，但在居中方面有问题

我得到：

我需要像这样的东西：

HTML:

可能吗

这里是解决方案这里是解决方案

div.error-label{
填充：7px 10px 0 4px；
颜色：#fff；
背景色：#DA362A；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
宽度：150px；
左边距：5px；
}
div.error-label-arrow{
边框顶部：10px实心透明；
边框底部：10px实心透明；
右边框：10px实心#DA362A；
浮动：左；
高度：1px；
利润上限：3倍；
}

此字段是必需的。

您可以使用来执行此操作，因此不需要“arrow”元素：

div.error-label{
填充：10px；
颜色：#fff；
背景色：#DA362A；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
宽度：190px；
利润率：30像素；
}
div.error-label:之前{
内容：''；
身高：0；
位置：绝对位置；
宽度：0；
左：18px；
边框：10px实心透明；
右边框颜色：#DA362A；
}

此字段为必填项。

您可以通过使用

伪元素

检查下面的答案来实现这一点

。错误{
位置：相对位置；
背景：红色；
填充：10px；
颜色：#fff；
边际：0 12像素；
宽度：自动；
显示：内联块；
}
.错误：：之前{
内容：“；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：9px 11px 9px 0；
边框颜色：透明红色透明；
位置：绝对位置；
左：-11px；
排名：0；
底部：0；
保证金：自动；
}
.arrow_类型2{
位置：相对位置；
背景#28d57f；
边框：3px实心#0cf5a7；
填充：50px 20px；
左边距：20px；
边缘顶部：20px；
宽度：自动；
显示：内联块；
}
.arrow_type2:之后，.arrow_type2:之前{
右：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
}
.arrow_类型2：之后{
边框颜色：rgba（40213127,0）；
右边框颜色：#28d57f；
边框宽度：10px；
利润上限：-10px；
}
.arrow_类型2：之前{
边框颜色：rgba（122451670）；
右边框颜色：#0cf5a7；
边框宽度：14px；
利润上限：-14px；
}

这是必填字段
箭头类型二

是否添加一些填充？或者添加一个提琴，我会告诉你我的意思，你可以使用背景图像，而不是用CSS创建箭头，然后给div指定固定高度并

垂直对齐：居中应该可以工作。它也适用于较旧的浏览器。是否可以删除
margin:30px边距
，这样你就可以看到屏幕上的箭头。注意：更改填充/边距需要更改伪类上的
left
<div class="error-label-arrow"></div>
<div class="error-label">This field is required.</div>

div.error-label{
    padding: 7px 10px 0 4px;
    color: #fff;
    background-color: #DA362A;
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
    border-radius: 5px;
}

div.error-label-arrow{
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent; 
    border-right:10px solid #DA362A;
    float: left;
}