本篇文章给大家带来的内容是关于如何使用纯css实现一个足球场的俯视图（附源码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义 dom，容器中包含场地，场地中再包含中线、中点、中圈、禁区、罚球点、罚球弧、球门区、角球区等元素：
登录后复制
居中显示：
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(sandybrown, maroon);}
登录后复制
定义容器尺寸：
立即学习“前端免费学习笔记（深入）”；
.container { width: 120em; height: 80em; background-color: green; font-size: 5px;}.container span { display: block;}
登录后复制
定义线型：
.container { --line: 0.3em solid white;}
登录后复制
画出场地边线：
.container { padding: 5em;}.field { width: inherit; height: inherit; border: var(--line);}
登录后复制
画出中线：
.halfway-line { width: calc(120em / 2); height: 80em; border-right: var(--line);}
登录后复制
画出中圈：
.field { position: relative;}.centre-circle { width: 20em; height: 20em; border: var(--line); border-radius: 50%; position: absolute; top: calc((80em - 20em) / 2); left: calc((120em - 20em - 0.3em) / 2);}
登录后复制
画出中点：
.centre-mark { width: 2em; height: 2em; background-color: white; border-radius: 50%; position: absolute; top: calc(80em / 2 - 1em); left: calc(120em / 2 - 1em + 0.3em / 2);}
登录后复制
画出禁区：
.penalty-area { width: 18em; height: 44em; border: var(--line); position: absolute; top: calc((80em - 44em) / 2); left: -0.3em;}
登录后复制
画出罚球点：
.penalty-mark { width: 2em; height: 2em; background-color: white; border-radius: 50%; position: absolute; top: calc(80em / 2 - 1em); left: calc(12em - 1em);}
登录后复制
画出罚球弧：
.penalty-arc { width: 20em; height: 20em; border: var(--line); border-radius: 50%; position: absolute; top: calc((80em - 20em) / 2); left: calc(12em - 20em / 2);}
登录后复制
隐藏罚球弧左侧弧线，只留右侧弧线：
.field { z-index: 1;}.penalty-area { background-color: green;}.penalty-arc { z-index: -1;}
登录后复制
画出球门区：
.goal-area { width: 6em; height: 20em; border: var(--line); position: absolute; top: calc((80em - 20em) / 2); left: -0.3em;}
登录后复制
画出角球区：
.field { overflow: hidden;}.corner-arc::before,.corner-arc::after { content: ''; position: absolute; width: 5em; height: 5em; border: 0.3em solid white; border-radius: 50%; --offset: calc(-5em / 2 - 0.3em); left: var(--offset);}.corner-arc::before { top: var(--offset);}.corner-arc::after { bottom: var(--offset);}
登录后复制
把 dom 中的子元素复制出一份，左右两侧各一份：
登录后复制
右侧的样式与左侧相同，只需要水平翻转即可：
.right { position: absolute; top: 0; left: 50%; transform: rotateY(180deg);}
登录后复制
大功告成！
相关推荐：
如何使用纯CSS实现蝴蝶标本的展示框效果
如何使用纯CSS实现蝴蝶标本的展示框效果
以上就是如何使用纯CSS实现一个足球场的俯视图（附源码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2893023.html
