CSS 实现地图点位Marker

最新推荐文章于 2023-06-19 20:30:17 发布

小智大愚

最新推荐文章于 2023-06-19 20:30:17 发布

阅读量818

点赞数 1

分类专栏： web 前端文章标签： css 前端

本文链接：https://blog.csdn.net/Sandy_zhi/article/details/122967442

版权

web 前端专栏收录该内容

90 篇文章 1 订阅

订阅专栏

对我来说写静态页面是相对于逻辑比较弱一点的，分析来说还是平时写的不够多，毕竟CSS 是练出来的。

不是特别复杂的内容，只是自己这方便比较薄弱，简单记录一下，保存一个demo。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div style='position:relative;width: 22px;height: 40px;'>
    <div style='position:absolute;width:25px;height:25px;;top:2px;left:0px;background: #0E3169;color:#fff;line-height:26px; text-align: center;border-radius: 40px;'></div>
    <div style='position: absolute;height: 0px;width: 0px;bottom: 4px;left: 2px;border: 10px transparent solid;border-top-color: #0E3169;border-width: 14px 10px 0px 10px;'></div>
    <img style='width:15px;height:15px;position:absolute;top: 5px;left: 52%; transform: translateX(-50%);' src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ftta.cn%2Ftbimg%2Fimg%2Fimgextra%2Fi3%2F2469027882%2FTB2.mpFXabyQeBjy1XbXXa9yXXa_%21%212469027882.gif&refer=http%3A%2F%2Ftta.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647593134&t=9cfe9b7c7f259fab842710e23193b06a'>
    <div style='position:absolute; left: 10px; top:6px;font-size:11px;color: #fff; background: #0E3169;padding:2px 5px 2px 14px;z-index: -50;white-space:nowrap;border-top-right-radius: 10px;border-bottom-right-radius: 10px;'>这个地方打架斗殴了</div>
  </div>
</body>
</html>

效果如下图所示：右侧的效果是因为项目需求简单补上的。

立个FLAG ，这个周末找机会练习一些css 尤其是动画相关的。

小智大愚

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS 实现地图点位Marker

对我来说写静态页面是相对于逻辑比较弱一点的，分析来说还是平时写的不够多，毕竟CSS 是练出来的。不是特别复杂的内容，只是自己这方便比较薄弱，简单记录一下，保存一个demo。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0".
复制链接

扫一扫