css - 带有带虚线边框的三 Angular 形箭头的工具提示

我正在尝试创建一个在底部具有三角形箭头的弹出工具提示。问题在于，当边框被修饰时，箭头看起来像是旋转的立方体（确实是）。

有没有办法从中切出顶部三角形，也切出三角形所在的底部边界？

这是我的CSS：

<div class="new-field-popup"></div>

.new-field-popup{
    position: absolute;
    width: 200px;
    height: 57px;
    padding: 20px;
    border-radius: 5px;
    top: 10px;
    left: 10px;
    border: 1px dashed rgb(177, 177, 177);
}

.new-field-popup:after{
    content: '';
    border: 1px dashed rgb(177, 177, 177);
    position: absolute;
    left: 110px;
    bottom: -10px;
    width: 20px;
    height: 20px;
    transform: rotate(45deg);
}

我并不想达到这样的最终结果：


See JSFiddle here

最佳答案

你快到了。

CSS更新：

.new-field-popup:after{
/* change your border rule to just bottom and right */
    border-bottom: 1px dashed rgb(177, 177, 177);
     border-right: 1px dashed rgb(177, 177, 177);
/* add a background colour to hide the bit of other border */
     background-color:white;
}

https://jsfiddle.net/odt1xa9L/2/