本篇文章给大家带来的内容是关于如何使用纯css实现一个足球场的俯视图（附源码） ，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
效果预览源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读定义 dom，容器中包含场地，场地中再包含中线、中点、中圈、禁区、罚球点、罚球弧、球门区、角球区等元素：
<div class="container">    <div class="field">        <span class="halfway-line"></span>        <span class="centre-circle"></span>        <span class="centre-mark"></span>        <span class="penalty-area"></span>        <span class="penalty-mark"></span>        <span class="penalty-arc"></span>        <span class="goal-area"></span>        <span class="corner-arc"></span>    </div></div>
居中显示：
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 中的子元素复制出一份，左右两侧各一份：
<div class="container">    <div class="field">        <div class="left">            <span class="halfway-line"></span>            <span class="centre-circle"></span>            <span class="centre-mark"></span>            <span class="penalty-area"></span>            <span class="penalty-mark"></span>            <span class="penalty-arc"></span>            <span class="goal-area"></span>            <span class="corner-arc"></span>        </div>        <div class="right">            <span class="halfway-line"></span>            <span class="centre-circle"></span>            <span class="centre-mark"></span>            <span class="penalty-area"></span>            <span class="penalty-mark"></span>            <span class="penalty-arc"></span>            <span class="goal-area"></span>            <span class="corner-arc"></span>        </div>    </div></div>
右侧的样式与左侧相同，只需要水平翻转即可：
.right {    position: absolute;    top: 0;    left: 50%;    transform: rotatey(180deg);}
大功告成！
相关推荐：
如何使用纯css实现蝴蝶标本的展示框效果
如何使用纯css实现windows启动界面的动画效果
以上就是如何使用纯css实现一个足球场的俯视图（附源码）的详细内容。