带有带虚线边框的三角形箭头的工具提示

Question

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

有没有办法从中切出顶部三角形并切出三角形所在的底部边框？

这是我的 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

Answer 1

你快到了。

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/

带有带虚线边框的三角形箭头的工具提示

Tooltip with a triangle arrow with dashed border

css

popup

tooltip