How to use pure CSS to implement a top view of a football field (with source code)

This article gives you the content is about how to use a pure CSS to achieve a football stadium top view (with source), there is a certain reference value, the need for friends can refer to, I hope you have some help.

Effect Preview

Source code Download

Https://github.com/comehope/front-end-daily-challenges

Code interpretation

Defines the DOM, which contains the site, and contains elements such as midline, Midpoint, center ring, restricted area, penalty point, free throw arc, goal area, corner corners, and so on:

<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>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background:radial-gradient (Sandybrown, maroon);}

Define Container Dimensions:

. container {    width:120em;    Height:80em;    Background-color:green;    font-size:5px;}. Container span {    display:block;}

To define a linetype:

. container {    --line:0.3em solid white;}

Draw the edge of the site:

. container {    padding:5em;}. field {    Width:inherit;    Height:inherit;    Border:var (--line);}

Draw the midline:

. halfway-line {    width:calc (120EM/2);    Height:80em;    Border-right:var (--line);}

To draw a middle circle:

. 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);}

Draw the midpoint:

. 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);}

Draw a restricted area:

. penalty-area {    width:18em;    Height:44em;    Border:var (--line);    Position:absolute;    Top:calc ((80em-44em)/2);    Left: -0.3em;}

Draw a free throw point:

. penalty-mark {    width:2em;    Height:2em;    Background-color:white;    border-radius:50%;    Position:absolute;    Top:calc (80EM/2-1em);    Left:calc (12em-1em);}

Draw a free throw arc:

. penalty-arc {    width:20em;    Height:20em;    Border:var (--line);    border-radius:50%;    Position:absolute;    Top:calc ((80em-20em)/2);    Left:calc (12EM-20EM/2);}

Hide the left arc of the free throw arc, leaving only the right arc:

. field {    z-index:1;}. Penalty-area {    background-color:green;}. Penalty-arc {    Z-index:-1;}

Draw a goal area:

. goal-area {    width:6em;    Height:20em;    Border:var (--line);    Position:absolute;    Top:calc ((80em-20em)/2);    Left: -0.3em;}

Draw a corner area:

. 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);}

Copy the child elements in the DOM, one on each side of the

<div class= "Container" > <div class= "field" > <div class= "left" > <span class= "half Way-line "></span> <span class=" centre-circle "></span> <span class=" Centre-ma RK "></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> &L T;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&Gt <span class= "Corner-arc" ></span> </div> </div></div>

The right side of the style is the same as the left side, just flip horizontally:

. right {    position:absolute;    top:0;    left:50%;    Transform:rotatey (180deg);}

Done!