html - 如何为工具提示上的箭头添加边框？

Question

我创建了工具提示，如下所示：

但是箭头不像元素的其余部分那样有边框。

CSS如下：

 .tooltip {
position: relative;
display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 50px;
  height: 30px;
  background-color: #000;
  color: #fdfefe;
  text-align: center;
  border-radius: 0;
  padding: 5px 0;
  bottom: 125%;
  left: 50%;
  margin-left: -110px;
  margin-top: 15px;
  opacity: 1;
  border: 2px solid grey;
  position: absolute;
  z-index: 1;
  top: -20px;
  left: 205%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -4px;
  border-width: 6px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

如何也为箭头添加边框？

Answer 1

像这样尝试兄弟:)

.down-arrow {
    display: inline-block;
    position: relative;
    border: 2px solid #777777;
    text-decoration: none;
    border-radius: 2px;
    padding: 20px;
    margin-top: 50px;
    background-color: red;
}
.down-arrow:before {
    content: '';
    display: block;
    position: absolute;
    left: 42%;
    right: 0;
    bottom: -28px;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-top-color: #777777;
}

.down-arrow:after {
    content: '';
    display: block;
    position: absolute;
    left: 42%;
    bottom: -24px;
    width: 0;
    height: 0;
    border: 14px solid transparent;
    border-top-color: red;
}

<div href="#" class="down-arrow">Perfect Arrow</div>