Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.