css -> 弹出带 小三角箭头的 图层

 

原理是 给 元素 设置 position:relative;

然后给元素的:after , :before 设置显示样式 并 position:absolute 

 

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  left: 100%;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-left-color: #ccc;
  top: 15px;
}

#demo:before {
  border-width: 14px;
  border-left-color: #333;
  top: 10px;
}
</style>

 

 

************   箭头向上 --------------

<div id="demo"></div>

<style>
#demo {
  width: 100px;
  height: 100px;
  margin-top:50px;
  background-color: #ccc;
  position: relative;
  border: 4px solid #333;
}

#demo:after, #demo:before {
  border: solid transparent;
  content: ' ';
  height: 0;
  position: absolute;
  width: 0;
}

#demo:after {
  border-width: 9px;
  border-bottom-color: #ccc;
  top: -18px;
  left:35px;
}

#demo:before {
  border-width: 14px;
  border-bottom-color: #333;
  
  left: 30px;
  top: -30px;
}
</style>