How to use pure CSS to realize the top view of a football field
This article mainly shows you "how to use pure CSS to achieve the top view of a football field", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn this article "how to use pure CSS to achieve the top view of a football field".
Code interpretation
Define dom. The container contains the venue, which also contains elements such as centerline, midpoint, center circle, restricted area, free throw point, free throw arc, goal area, corner area, etc.
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background:radial-gradient (sandybrown,maroon)
}
Define the container size:
.container {
Width:120em
Height:80em
Background-color:green
Font-size:5px
}
.containerspan {
Display:block
}
Define the linetype:
.container {
-- line:0.3emsolidwhite
}
Draw the sidelines of the site:
.container {
Padding:5em
}
.field {
Width:inherit
Height:inherit
Border:var (--line)
}
Draw the center line:
. halfway-line {
Width:calc (120em/2)
Height:80em
Border-right:var (--line)
}
Draw the 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 the penalty spot:
. penalty-mark {
Width:2em
Height:2em
Background-color:white
Border-radius:50%
Position:absolute
Top:calc (80em/2-1em)
Left:calc (12em-1em)
}
Draw the arc of the free throw:
. 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 the goal area:
. goal-area {
Width:6em
Height:20em
Border:var (--line)
Position:absolute
Top:calc ((80em-20em) / 2)
Left:-0.3em
}
Draw the corner area:
.field {
Overflow:hidden
}
. corner-arc::before
. corner-arc::after {
Content:''
Position:absolute
Width:5em
Height:5em
Border:0.3emsolidwhite
Border-radius:50%
-offset:calc (- 5em/2-0.3em)
Left:var (--offset)
}
. corner-arc::before {
Top:var (--offset)
}
. corner-arc::after {
Bottom:var (--offset)
}
Make a copy of the child elements in the dom, one on the left and right:
The style on the right is the same as on the left, only need to flip horizontally:
.right {
Position:absolute
Top:0
Left:50%
Transform:rotateY (180deg)
}
The above is all the contents of the article "how to use pure CSS to realize the top view of a football field". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
