CSS 实现地图点位Marker

最新推荐文章于 2024-04-17 16:15:40 发布

小智大愚

最新推荐文章于 2024-04-17 16:15:40 发布

阅读量868

点赞数 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>

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