html - CSS 中的输入设计验证问题

Question

我想重现该验证。

这是我取得的成就:

我从底部漏掉了那个三 Angular 形。我想用 css/css3 来解决这个问题。这是我尝试过的，但没有成功:

.contact-form .parsley-errors-list .parsley-required:after{
padding: 8px;
background-color:red
margin-top: 1px;
transition: none 0s ease 0s;
position: absolute;
content: "";
left: -6px;
transform: rotate(45deg);
}

你能指导我如何使用 css/css3 实现三 Angular 形吗？谢谢

Answer 1

使用它，看看它是否有帮助

.contact-form .parsley-errors-list .parsley-required{
    position: relative;
}

.contact-form .parsley-errors-list .parsley-required:after{
    content: '';
    position: absolute;
    top: 100%;
    left: 10px;
    border-left: 10px solid red;
    border-bottom: 10px solid transparent;
    transition: none 0s ease 0s;
}