Question

我是CSS的新手，我想知道如何用底箭做div 这是我到目前为止所达到的代码：

.tooltip-content-m {
  display: none;
  position: absolute;
  padding: 10px;
  border-radius: 4px;
  background: @gray-dark;
  font-size: 12px;
  color: @white;
  width: 180px;
  left: 5px;
  z-index: 10;
}

和底部箭头：

.arrow-down {
  bottom: -27px;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent; 
  border-top: 10px solid @gray-dark; 
  width: 0; 
  height: 0; 
}

问题是，无论我在div中写了多少行，我都希望箭头向下始终可见，这不是我的代码中的情况当我放置更多内容在框中写入新行时，向下箭头将不再出现。如何让它变得动态？

HTML

<span class="tooltip-content-m">
    <span class="tooltip-wrapper">
        <button class="close">x</button>
        <div>---content goes here---</div>
        <div class="arrow-down"></div>
    </span>
</span>

FIDDLE： https://jsfiddle.net/xzsya7tm/

谢谢！

Answer 1

你的工具提示结构有点过于复杂，你甚至不需要箭头的额外div ...你可以用伪元素来做。

.tooltip {
  position: relative;
  padding: 10px;
  border-radius: 4px;
  background: #004;
  font-size: 12px;
  color: #FFF;
  display: inline-block;
  max-width: 180px;
}
.tooltip::after {
  content: '';
  top: 100%;
  left: 10%;
  position: absolute;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
  border-top: 10px solid #004;
}
.tooltip .close {
  padding: 5px;
}

<div class="tooltip">
  <button class="close">x</button>
  <div>---content goes here---</div>
</div>



<div class="tooltip">
  <button class="close">x</button>
  <div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur dolores, iure numquam laborum repellendus ad.</p>
  </div>
</div>

Answer 2

请更改底部CSS -20px（而不是-27px）..而不是这样你的代码工作正常。

jsfiddle.net/xzsya7tm/2 /

.arrow-down {bottom: -20px;...

div中的向下箭头位置

2 个答案: