绳索下来菜单中的工具提示的Css

Question

我想制作一个工具提示下拉但是箭头有问题请在某个位置按照我想要的方式谢谢你

以下是我的内容

我希望它看起来像这样

这是我的CSS代码

<style>
    #wrapper-err {
      position: absolute;
      display: inline-block;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2222;
      width:210px;
      height:90px;
      margin-top:2em;
      margin-left:2em;
}

.err-tip {
    background-color: #D03B3E;
    color:#fff;
    padding:0.5em;
}

.err-tip::before {
      content: "";
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-top: 18px solid #D03B3E;
      position: absolute;
      top: -18px;
      left: 50%;
      margin-left: -4px;
      display: block;

}

.err-tip div{
    margin: 0px;
    border: 0px none;
    font: inherit;
    vertical-align: baseline;
    outline: medium none;
}
.err-close{
  float: right;
  position: absolute;
  top: 1px;
  right: 1px;
  cursor: pointer;
  border: 1px dotted;
  margin: 0.2em;
}
.err-tip p{
  margin-right: 0.4em;
  margin-top: 0.4em;
  margin-bottom: 0.4em;
}

</style>

HTML

<div class="err-tip" id="wrapper-err">
    <span class="err-close">X</span>
    <p>hfdbmxvncbv jkjfvkbcjkjzcjxvbckjkjzckxvjbc.</p>
</div>

Answer 1

只需像这样更改箭头边框：

.err-tip::before {
      content: "";
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 18px solid #D03B3E; /* changed from top to bottom */
      position: absolute;
      top: -18px;
      right: 25px; /* change the horizontal position */
      margin-left: -4px;
      display: block;
}

这是一个片段：

 #wrapper-err {
    position: absolute;
    display: inline-block;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2222;
    width:210px;
    height:90px;
    margin-top:2em;
    margin-left:2em;
}

.err-tip {
    background-color: #D03B3E;
    color:#fff;
    padding:0.5em;
}

.err-tip::before {

      content: "";
      width: 0; 
      height: 0; 
      border-left: 15px solid transparent;
      border-right: 15px solid transparent;
      border-bottom: 18px solid #D03B3E;
      position: absolute;
      top: -18px;
      right: 25px;
      margin-left: -4px;
      display: block;

}

.err-tip div{
    margin: 0px;
    border: 0px none;
    font: inherit;
    vertical-align: baseline;
    outline: medium none;
}
.err-close{
float: right;
position: absolute;
top: 1px;
right: 1px;
cursor: pointer;
border: 1px dotted;
margin: 0.2em;
}
.err-tip p{
margin-right: 0.4em;
margin-top: 0.4em;
margin-bottom: 0.4em;
}

<div class="err-tip" id="wrapper-err">
  <span class="err-close">X</span>
  <p>the text.</p>
</div>