用CSS绘制最常见的40种形状和图形(1)

于 2024-04-11 14:38:55 发布
阅读量792 收藏 28
点赞数 19
分类专栏： 程序员 文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76379381/article/details/137638686
版权
本文详细介绍了如何使用CSS3创建多种图形，如圆形、椭圆、三角形、梯形等，并讨论了在不同浏览器兼容性下的实现。同时，作者分享了前端开发者提升技能的资源，强调基础知识在求职中的重要性。
摘要由CSDN通过智能技术生成

#circle {

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Oval(椭圆形)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#oval {

width: 200px;

height: 100px;

background: red;

-moz-border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

/* 可以使用百分比值(大于50%)，但是低版本的Android不支持 */

Triangle Up(向上的三角形)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

Triangle Down(向下)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

Triangle Left(向左)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

Triangle Right(向右)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}

Triangle Top Left(左上)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

#triangle-topleft {

width: 0;

height: 0;

border-top: 100px solid red;

border-right: 100px solid transparent;

}

Triangle Top Right(右上)

40个纯CSS绘制的图形9

#triangle-topright {

width: 0;

height: 0;

border-top: 100px solid red;

border-left: 100px solid transparent;

}

Triangle Bottom Left(左下)

40个纯CSS绘制的图形10

#triangle-bottomleft {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-right: 100px solid transparent;

}

Triangle Bottom Right(右下)

40个纯CSS绘制的图形11

#triangle-bottomright {

width: 0;

height: 0;

border-bottom: 100px solid red;

border-left: 100px solid transparent;

}

Curved Tail Arrow(弯尾箭头)

40个纯CSS绘制的图形12

40个纯CSS绘制的图形13

#curvedarrow {

position: relative;

width: 0;

height: 0;

border-top: 9px solid transparent;

border-right: 9px solid red;

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

-ms-transform: rotate(10deg);

-o-transform: rotate(10deg);

}

#curvedarrow:after {

content: “”;

position: absolute;

border: 0 solid transparent;

border-top: 3px solid red;

border-radius: 20px 0 0 0;

top: -12px;

left: -9px;

width: 12px;

height: 12px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

Trapezoid(梯形)

40个纯CSS绘制的图形14

#trapezoid {

border-bottom: 100px solid red;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

height: 0;

width: 100px;

}

Parallelogram(平行四边形)

40个纯CSS绘制的图形15

#parallelogram {

width: 150px;

height: 100px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

background: red;

}

Star (6-points)(六角星)

40个纯CSS绘制的图形16

#star-six {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

position: relative;

}

#star-six:after {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

position: absolute;

content: “”;

top: 30px;

left: -50px;

}

Star (5-points)(五角星)

40个纯CSS绘制的图形17

#star-five {

margin: 50px 0;

position: relative;

display: block;

color: red;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

-moz-transform: rotate(35deg);

-webkit-transform: rotate(35deg);

-ms-transform: rotate(35deg);

-o-transform: rotate(35deg);

}

#star-five:before {

border-bottom: 80px solid red;

border-left: 30px solid transparent;

border-right: 30px solid transparent;

position: absolute;

height: 0;

width: 0;

top: -45px;

left: -65px;

display: block;

content: ‘’;

-webkit-transform: rotate(-35deg);

-moz-transform: rotate(-35deg);

-ms-transform: rotate(-35deg);

-o-transform: rotate(-35deg);

}

#star-five:after {

position: absolute;

display: block;

color: red;

top: 3px;

left: -105px;

width: 0px;

height: 0px;

border-right: 100px solid transparent;

border-bottom: 70px solid red;

border-left: 100px solid transparent;

-webkit-transform: rotate(-70deg);

-moz-transform: rotate(-70deg);

-ms-transform: rotate(-70deg);

-o-transform: rotate(-70deg);

content: ‘’;

}

Pentagon(五边形)

40个纯CSS绘制的图形18

#pentagon {

position: relative;

width: 54px;

border-width: 50px 18px 0;

border-style: solid;

border-color: red transparent;

}

#pentagon:before {

content: “”;

position: absolute;

height: 0;

width: 0;

top: -85px;

left: -18px;

border-width: 0 45px 35px;

border-style: solid;

border-color: transparent transparent red;

}

Hexagon(六边形)

40个纯CSS绘制的图形19

#hexagon {

width: 100px;

height: 55px;

background: red;

position: relative;

}

#hexagon:before {

content: “”;

position: absolute;

top: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 25px solid red;

}

#hexagon:after {

content: “”;

position: absolute;

bottom: -25px;

left: 0;

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 25px solid red;

}

Octagon(八边形)

40个纯CSS绘制的图形20

#octagon {

width: 100px;

height: 100px;

background: red;

position: relative;

}

#octagon:before {

content: “”;

position: absolute;

top: 0;

left: 0;

border-bottom: 29px solid red;

border-left: 29px solid #fff;

border-right: 29px solid #fff;

width: 42px;

height: 0;

}

#octagon:after {

content: “”;

position: absolute;

bottom: 0;

left: 0;

border-top: 29px solid red;

border-left: 29px solid #fff;

border-right: 29px solid #fff;

width: 42px;

height: 0;

}

Heart(心形)

40个纯CSS绘制的图形21

#heart {

position: relative;

width: 100px;

height: 90px;

}

#heart:before,

#heart:after {

position: absolute;

content: “”;

left: 50px;

top: 0;

width: 50px;

height: 80px;

background: red;

-moz-border-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

-webkit-transform-origin: 0 100%;

-moz-transform-origin: 0 100%;

-ms-transform-origin: 0 100%;

-o-transform-origin: 0 100%;

transform-origin: 0 100%;

}

#heart:after {

left: 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

transform-origin :100% 100%;

}

Infinity(无限符图形)

40个纯CSS绘制的图形22

#infinity {

position: relative;

width: 212px;

height: 100px;

}

#infinity:before,

#infinity:after {

content: “”;

position: absolute;

top: 0;

left: 0;

width: 60px;

height: 60px;

border: 20px solid red;

-moz-border-radius: 50px 50px 0 50px;

border-radius: 50px 50px 0 50px;

-webkit-transform: rotate(-45deg);

-moz-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

-o-transform: rotate(-45deg);

transform: rotate(-45deg);

}

#infinity:after {

left: auto;

right: 0;

-moz-border-radius: 50px 50px 50px 0;

border-radius: 50px 50px 50px 0;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

}

Diamond Square(菱形)

40个纯CSS绘制的图形23

#diamond {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom-color: red;

position: relative;

top: -50px;

}

#diamond:after {

content: ‘’;

position: absolute;

left: -50px;

top: 50px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top-color: red;

}

Diamond Shield（钻石盾牌）

40个纯CSS绘制的图形24

#diamond-shield {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom: 20px solid red;

position: relative;

top: -50px;

}

#diamond-shield:after {

content: ‘’;

position: absolute;

left: -50px; top: 20px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top: 70px solid red;

}

Diamond Narrow

40个纯CSS绘制的图形25

#diamond-narrow {

width: 0;

height: 0;

border: 50px solid transparent;

border-bottom: 70px solid red;

position: relative;

top: -50px;

}

#diamond-narrow:after {

content: ‘’;

position: absolute;

left: -50px; top: 70px;

width: 0;

height: 0;

border: 50px solid transparent;

border-top: 70px solid red;

}

Cut Diamond(砖石形)

40个纯CSS绘制的图形26

#cut-diamond {

border-style: solid;

border-color: transparent transparent red transparent;

border-width: 0 25px 25px 25px;

height: 0;

width: 50px;

position: relative;

margin: 20px 0 50px 0;

}

#cut-diamond:after {

content: “”;

position: absolute;

top: 25px;

left: -25px;

width: 0;

height: 0;

border-style: solid;

border-color: red transparent transparent transparent;

border-width: 70px 50px 0 50px;

}

Egg(鸡蛋)

40个纯CSS绘制的图形27

#egg {

display:block;

width: 126px;

height: 180px;

background-color: red;

-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;

border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;

}

Pac-Man(吃豆人)

40个纯CSS绘制的图形28

#pacman {

width: 0px;

height: 0px;

border-right: 60px solid transparent;

border-top: 60px solid red;

border-left: 60px solid red;

border-bottom: 60px solid red;

border-top-left-radius: 60px;

border-top-right-radius: 60px;

border-bottom-left-radius: 60px;

border-bottom-right-radius: 60px;

}

Talk Bubble（聊天框）

40个纯CSS绘制的图形29

#talkbubble {

width: 120px;

height: 80px;

background: red;

position: relative;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

}

#talkbubble:before {

content:“”;

position: absolute;

right: 100%;

top: 26px;

width: 0;

height: 0;

border-top: 13px solid transparent;

border-right: 26px solid red;

border-bottom: 13px solid transparent;

}

12 Point Burst（爆炸形状）

40个纯CSS绘制的图形30

#burst-12 {

background: red;

width: 80px;

height: 80px;

position: relative;

text-align: center;

}

#burst-12:before, #burst-12:after {

content: “”;

position: absolute;

top: 0;

left: 0;

height: 80px;

width: 80px;

background: red;

}

#burst-12:before {

-webkit-transform: rotate(30deg);

-moz-transform: rotate(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

}

#burst-12:after {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-ms-transform: rotate(60deg);

-o-transform: rotate(60deg);

}

Yin Yang(阴阳八卦)

40个纯CSS绘制的图形31

#yin-yang {

width: 96px;

height: 48px;

background: #eee;

border-color: red;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

img

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

te(30deg);

-ms-transform: rotate(30deg);

-o-transform: rotate(30deg);

}

#burst-12:after {

-webkit-transform: rotate(60deg);

-moz-transform: rotate(60deg);

-ms-transform: rotate(60deg);

-o-transform: rotate(60deg);

}

Yin Yang(阴阳八卦)

40个纯CSS绘制的图形31

#yin-yang {

width: 96px;

height: 48px;

background: #eee;

border-color: red;

border-style: solid;

border-width: 2px 2px 50px 2px;

border-radius: 100%;

position: relative;

}

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-uTu4n5uw-1712817488663)]

[外链图片转存中…(img-L4veV3tu-1712817488663)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-o7n1slRo-1712817488664)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

基础知识是前端一面必问的，如果你在基础知识这一块翻车了，就算你框架玩的再6，webpack、git、node学习的再好也无济于事，因为对方就不会再给你展示的机会，千万不要因为基础错过了自己心怡的公司。前端的基础知识杂且多，并不是理解就ok了，有些是真的要去记。当然了我们是牛x的前端工程师，每天像背英语单词一样去背知识点就没必要了，只要平时工作中多注意总结，面试前端刷下题目就可以了。

什么？你问面试题资料在哪里，这不是就在你眼前吗（滑稽

资料领取方式：戳这里获取

羊羊要坚持
关注
  • 19
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3形状制作
m0_37058714的博客
07-09 425
1.阴阳八卦 <style type="text/css"> #yin-yang{ position:relative; width:96px; height:48px; background:white; border-color:black;...
CSS图形绘制
落枫秋歌
10-25 322
圆 使用border-radius特性； 代码实现，具体可见jsfiddle.net <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS图形绘制</title> </head> <body> &...
CSS 实现：常见几何图形绘制
薛定谔的猫-前端领域
10-04 1321
三角形 border实现 首先将元素内容宽高设置为0，设置每个border宽和样式后是四个三角形。 等边三角形：通过设置border宽度比为：指定方向 / 非指定方向 = 即可。 角落三角形：只设置相邻两个border的宽度，且其中一个设置为transparent。 方法二：正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形 方法一：把正六边形分成三部分，左中右分别是：before 伪元素部分，div 部分，after
css形状
sky2714的博客
07-13 225
css三角形估计大家都写过, 用border即可实现,不过五角星之类的形状估计大多人就直接用图片了吧,最近面试遇到了一个css绘制五角星的题目,没有答上来,所以在这里记录一吧: css代码: #star-five { margin: 50px 0; position: relative; display: block; color: red; width: 0...
CSS的各种形状
qq_44675204的博客
04-27 392
基于原生CSS的一些关于形状的操作
用CSS代码写出的各种形状图形的方法
09-25
CSS代码写出的各种形状图形的方法 CSS代码可以用来绘制各种形状图形，从简单的正方形、长方形到复杂的梯形、六角星...同时，通过了解这些形状图形的实现原理，可以更好地理解CSS的样式设置和transform属性的使用方法。
CSS_shape.zip_CSS 绘制图形
09-21
通过组合使用`transform`属性和`before`与`after`伪元素，我们可以创建出不同角数的星星，五角星是最常见的一种。 2. `shape_heart.html`：心形是另一个常见的图形，通常用于表达爱意。这个文件可能包含了一种使用...
使用css3绘制出各种几何图形
09-27
在CSS3中，我们可以利用边框半径（border-radius）属性来绘制各种几何图形，这大大增强了网页设计的灵活性和创造性。以下将详细介绍如何通过CSS3实现标题中提到的几种几何图形。 1. **圆形** 要创建一个圆形，我们...
CSS技巧：用css绘制漂亮的徽章缎带图形.zip
最新发布
07-06
资源介绍： 从CSS画一个漂亮的徽章和缎带！适用所有需要给用户发徽章的场景啊，可以通过修改CSS，完成徽章颜色，徽章文字，徽章形状的修改。嗯，就是这些吧！很写实漂亮的徽章和缎带效果，推荐下载！ 资源特点：代码...
JS+CSS3绘制数字科技脸元素图形特效
06-11
本项目“JS+CSS3绘制数字科技脸元素图形特效”就是这样一个例子，它结合了JS动态生成和CSS3的高级特性，为用户提供了一种新颖且具有科技感的交互体验。下面将详细介绍这一特效的实现原理和关键知识点。 首先，我们...
css实现各种形状
acm_cn1234567890的博客
11-04 212
正方形 / 长方形 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .square { width: 120px; height: 120px; background-color: #0000FF; } </style>
【HTML】 - CSS绘制图形
baidu_hxl的博客
06-25 415
css绘制图形，三角形、平行四边形、等腰三角形、菜单图标
css绘制各种形状图形
在线学习web前端开发教程
01-10 483
虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 一、实心圆 .circle { width: 120px; height: 120px; background: #8BC34A; border-radius: 100%; } 二、圆环（空心圆） .ring { ...
纯CSS制作各种图形(多图预警)
qq_27009517的博客
12-16 877
今天在国外一网站(The Shapes of CSS)看到的，看了一下 css，也不复杂，只是平时没有用心去思考~用心思考~埋头赶路~~ Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { width: 200px; height: 100px; background: red; } Circl
纯CSS画基本图形（矩形、圆形、三角形、多边形、爱心）
qq_45345113的博客
07-18 2761
今天在css-tricks上看到一篇文章，那篇文章让我不禁心头一震，强大的CSS啊，居然能画出这么多基本的图形。图形包括基本的矩形、圆形、椭圆、三角形、多边形，也包括稍微复杂一点的爱心、钻石、阴阳八卦等。...
纯css制作常见的图形
m0_72759446的博客
09-06 346
【代码】纯css制作常见的图形。
CSS画几种图形的方法
老电影故事的博客
04-01 1013
clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的 URL 定义的路径或者外部 SVG 的路径。使用 border 实现三角形应该是大部分人都掌握的，也是各种面经中经常出现的，利用了高宽为零的容器及透明的 border 实现。使用伪元素在一个正方形的元素上创建一个完全重叠的圆形，并使用transform属性将其缩小到所需大小。将一个正方形的元素的border-radius属性设置为50%即可将其变为一个圆形。
使用CSS绘制各种形状
weixin_55788590的博客
06-22 1070
CSS 能够制作各种形状。正方形和矩形很容易，因为它们是网络的自然形状。 添加一个width和height，您就拥有了所需的确切大小的矩形。 添加border-radius，你可以把那个形状变圆，足够多的你可以把这些矩形变成圆形和椭圆形。 正方形 #square { width: 100px; height: 100px; background: red; } 矩形形状 #rectangle { width: 200px; height: 100px; background: re
用css绘制图形,纯 CSS 绘制各种基本图形
weixin_33754535的博客
08-03 1188
最近被问到如何用CSS绘制一个圆，解决这个问题的同时引发了我对CSS绘制图形的兴趣。今天汇总一下CSS绘制的各种基本图形。1.正方形正方形是最简单的图形了，只需要宽高一致就可以绘制出来。// css.square{width: 100px;height: 100px;border: 1px solid black;}//html正方形2.圆形圆形主要用到了border-radius属性。该属性可以...
怎么用css绘制像地图标点的图形
08-03
### 回答1： 要使用 CSS 绘制类似地图标点的图形，可以使用圆形来模拟标点。使用 CSS 的 `border-radius` 属性可以将矩形变成圆形，并使用 `background-color` 属性设置圆的颜色。 例如，下面的代码可以创建一个大小为 50px 的红色圆形： ```css .map-marker { width: 50px; height: 50px; border-radius: 50%; background-color: red; } ``` 你还可以使用 `box-shadow` 属性为圆添加阴影，或者使用 `border` 属性在圆周围添加边框。 注意，如果你想要创建一个真正的地图标点，可能还需要使用其他技术，例如使用纯 HTML 和 CSS 创建箭头等。 ### 回答2： 在CSS中，可以使用伪元素和伪类来绘制像地图标点的图形。首先，创建一个元素作为地图容器，并设置宽度和高度。 然后，在地图容器中创建一个矩形元素作为地图图层，并设置宽度、高度、背景颜色和边框样式，使其看起来像一个地图。 接下来，使用伪元素:before来绘制标点图形。为伪元素:before设置宽度和高度，并使用绝对定位将其定位在地图图层上。 可以通过调整伪元素:before的宽度、高度和背景颜色来改变标点图形的形状和颜色。使用border-radius属性可以使标点图形变为圆形。 为了让标点图形在地图上显示出来，可以使用伪类:hover来触发标点图形的样式。为伪类:hover设置背景颜色和边框样式，以突出显示标点。 可以使用CSS的动画属性，如transition和keyframes，来增加标点图形的动态效果。例如，当鼠标悬停在地图上时，标点可以放大或产生其他变化。 最后，可以使用CSS的文本属性来添加地图上的文本信息。通过设置文本的字体、大小、颜色和位置，可以将地点名称显示在标点图形旁边。 综上所述，可以通过使用CSS的伪元素、伪类、定位、动画和文本属性来绘制像地图标点的图形，并通过调整相关属性和样式来实现各种效果和交互响应。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值