罗汉松驻扎的工作基地 2022-01-19 16:59 采纳率: 44.4%
浏览 159
已结题

用css 做一个地图定位点的图标

请问各路大虾， 我想简单用css写一个 地图上面的定位点（map-marker） 的图标，
就像是这个 , 我想用css 写一个简单的类， 然后在div的class 使用即可 。

请问网上有没有什么可以借鉴的代码， 我很少做前端css代码。谢谢。
补充：div的 width 为12px； height也是12px ;

img

  • 写回答

2条回答 默认 最新

  • 归来巨星 新星创作者: 前端开发技术领域 2022-01-19 17:14
    关注
    
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .circle{
    width: 12px;
    height: 12px;
    background: red;
    border-radius: 0px 18px 20px 18px;
    transform: rotate(-135deg);
}

    </style>
  </head>
  <body>
    <div class="circle"></div>
    <script>
 
    </script>
  </body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

  • 有趣的 CSS 图标整合技术！sprites精灵图，css贴图定位
    2024-04-29 13:34
    云桃桃前端的博客 图像精灵（Sprite），也称为雪碧图、CSS 雪碧、CSS Sprite，是一种 CSS 图像合成技术，它将多个小图标或图片合并到一个单独的图像文件中，然后通过 CSS 的背景定位属性来显示需要的部分。图像精灵主要用于解决 img ...
  • Web前端——用CSS的常用样式制作一个炫酷的按钮
    2022-11-18 12:13
    Q鑫的博客 border-top:⽤来单独设置边框的上边沿，同理还有border-bottom border-left border-right。...精灵图：是由多个图⽚拼起来的⼤图，它存在的价值是降低服务器的并发性，避免不必要的开销。overflow-x： 显示横向滑动条。
  • 前端面经-CSS篇(四）---定位
    2025-04-06 21:37
    小杨升级打怪中的博客 面试官问这些问题，关键想考察你对定位在不同场景下的原理掌握和灵活应用。你回答时要尽量结合示例代码或亲身经历过的布局问题来说明。还会看你对兼容性、实际案例、维护成本有没有一定的认识。
  • JS基于高德地图定位城市闪烁特效.zip
    2023-10-09 23:52
    这篇教程将介绍如何使用JavaScript与高德地图API创建一个基于地理位置的城市闪烁特效。这个特效适用于网页设计，可以增强用户体验，特别是在展示地理位置相关的信息时。我们将深入探讨jQuery、CSS特效以及如何将它们...
  • 使用CSS创建三角形图标
    2025-06-15 23:48
    说不说说不说说不说的博客 CSS 三角形是利用边框相交特性实现的：元素设置为零尺寸 (width: 0;height: 0通过控制不同方向边框的透明/显色状态边框相交处形成斜切角效果3.2两种主要实现方法对比方法代码示例生成形状特点典型应用场景双边框法...
  • 前端领域 CSS3 旋转动画的中心点设置
    2025-06-02 21:22
    AI实战架构笔记的博客 的核心作用与语法规则不同中心点设置对旋转动画的具体影响实战案例（如加载环、卡片翻转）的中心点调试技巧常见问题的排查与解决方案本文将从“生活中的旋转”切入，用“折纸”类比解释的作用；接着拆解核心概念...
  • css加号图标_手把手教你打造一个纯CSS图标库
    2021-01-26 20:54
    张饭团的博客 使用css/svg直接在浏览器中绘制图标。方案1：由于图标图片比较多，而且体积很小，为了减少请求所以很多时候我们会用雪碧图这种技术来将图标拼凑在同一张图片里面。你也能想到，一堆图标的雪碧图，修改维护会相当麻烦...
  • css绘制图标
    2025-02-20 18:46
    thinkQuadratic的博客 总结：在使用css绘制图标中，或者其他页面样式中。定位，伪元素，阴影，圆角等都是常用的属性。对于图标的选择方案上具体根据项目实际情况来。使用css绘制图标缺点也很明显，有些图标css绘制不出来。或者说使用css...
  • 定位，CSS高级技巧，修饰属性（定位，css精灵，字体图标）
    2025-01-06 10:02
    一雨方知深秋的博客 之所以图片下边出现空白键距，是因为...当使用类选择器改变字体图标样式时，类选择器中的font-size样式会覆盖 iconfont.css中的样式，所以显示出来的是 类选择器中的样式。将字体文件放到 具体要使用的代码的文件中。
  • 怎么用css绘制像地图标点的图形
    2022-12-20 09:53
    kdbshi的博客 要使用 CSS 绘制类似地图标点的图形，可以使用圆形来模拟标点。使用 CSS 的 border-radius 属性可以将矩形变成圆形，并使用 background-color 属性设置圆的颜色。 例如，下面的代码可以创建一个大小为 50px 的红色...
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 1月28日
  • 已采纳回答 1月20日
  • 修改了问题 1月19日
  • 创建了问题 1月19日