Подсказка с треугольной стрелкой с пунктирной рамкой - PullRequest
Новая
       42

Подсказка с треугольной стрелкой с пунктирной рамкой

0 голосов
/ 03 ноября 2018

Я пытаюсь создать всплывающую подсказку с треугольной стрелкой внизу. Проблема в том, что когда граница разбита, стрелка выглядит как повернутый куб (это так).

Есть ли способ вырезать из него верхний треугольник, а также вырезать нижнюю границу, где находится треугольник?

Вот мой 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);
}

Я пытаюсь достичь конечного результата, чтобы выглядеть так: enter image description here

См. JSFiddle здесь

1 Ответ

0 голосов
/ 03 ноября 2018

ты был почти там.

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/

...