css实现tip popup

来源：互联网发布：事业单位粉笔软件编辑：程序博客网时间：2024/05/17 20:29

<div class="ol-popup" style="width: 300px;height: 200px"><a href="#" class="ol-popup-closer"></a><div></div></div>

/*popup*/.ol-popup {  position: absolute;  background-color: white;  -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));  padding: 15px;  border-radius: 10px; /*圆角*/  border: 1px solid #cccccc;  bottom: 12px;  left: -50px;}/*以下是尖角的实现*/.ol-popup:after, .ol-popup:before {  top: 100%;  border: solid transparent; /*边框颜色设置为透明*/  content: " ";  height: 0; /*高、宽都设置为0，边框的4条边就聚合到一起，组合成一个小正方形。*/  width: 0; /*正方形按对角线分成4个小三角，分别对应4条边框*/  position: absolute;  pointer-events: none;/*不允许穿透层去点击下面的内容*/}.ol-popup:after {  /*只保留上面那条边的颜色。由于之前设置了transparent，所以其他边都默认是透明的了。  又由于4条边都合到了一起，变成4个小三角，所以其实是设置了上面那个三角的颜色，  其他三角都是透明的。这样，看到的就是一个tip尖角  */  border-top-color: red;  /*可以调整tip尖角的大小*/   border-width: 10px;  left: 48px;  margin-left: -10px;}.ol-popup:before {  border-top-color: #cccccc;  border-width: 11px;  left: 48px;  margin-left: -11px;}/*以下是关闭按钮*/.ol-popup-closer {  text-decoration: none;  position: absolute;  top: 2px;  right: 8px;}.ol-popup-closer:after {  content: "✖";}

0 0