四年一届的世界杯如火如荼，你熬夜看自己喜欢的球队比赛了吗？在这喜庆的气氛中，我决定用代码去参加世界杯，而要参加，那就是用CSS画一个足球场。正常使用CSS布局肯定是非常容易的，所以我决定只用一个div来完成。静下心来开始写作。在绘制足球场尺寸之前，首先要获取几个关键位置的尺寸。度娘查询结果如下：田地：长105米，宽68米；球门：长7.32米，高2.44米；大禁区（penaltyarea）：长40.32米，宽16.5米；小禁区（球门区）：长18.32米，宽5.5米中圈区：半径9.15米；角球：1米半径；罚球弧度：半径为9.15的半圆基本变量，本实现是以上述数值乘以2为像素值，对部分小区域的数值进行了调整。全局变量定义如下：:root{--lineColor:#fff;--fieldWidth:210px;--fieldHeight:136px;--centerCircle:18px;--cornerCircle:4px;--grandForbiddenAreaWidth:32px;--grandForbiddenAreaHeight:80px;--smallRestrictedAreaWidth:11px;--smallRestrictedAreaHeight:36px;--目标宽度：4px；一些CSS功能减少了额外代码的数量。足球场的本质是一个对称的图形，所以在这里使用CSS反射是非常合适的。如果不考虑只用一个div，也可以多次使用反射。这个CSS逻辑只实现了左边部分的内容，右边的内容是通过box-reflect反射实现的。-webkit-box-reflect:对;实现过程首先增加边框部分，本文所有线条均采用2px实现。div{width:calc(var(--fieldWidth)/2);高度：var(--fieldHeight);border:2pxsolidvar(--lineColor);}接下来开始在中心画圆，因为只用了一个div，所以会大量使用CSS渐变来实现各种线条部分。这里需要注意的是，带反射的代码只需要画一个半圆，所以加上no-repeat，避免在左边再画一个半圆。径向渐变（圆，#0000var（--centerCircle）0，var（--lineColor）calc（var（--centerCircle）），var（--lineColor）calc（var（--centerCircle）+2px），#0000calc(var(--centerCircle)+2px))no-repeatcalc(var(--fieldWidth)/4)50%/100%100%然后画四个角角区域圆，上下角部分需要单独绘制，核心代码是一样的，只是background-position的位置不同。//Radial-gradient(circle,#0000var(--cornerCircle),var(--lineColor)calc(var(--cornerCircle)),var(--lineColor)calc(var(---cornerCircle)+2px),#0000calc(var(--cornerCircle)+2px))无重复计算(var(--fieldWidth)/4*-1)calc(var(--fieldHeight)/2*-1)/100%然后画出禁区的部分。这部分本质上是一个矩形，但是左边的线和底线是重合的，所以需要画出剩下的三条线。这里为了减少一部分代码，其中两条线使用conic-gradient绘制，其余线使用linear-gradient绘制。锥形渐变（从右2px底部2px的-90deg，rgba（31、157、161、0）090deg，#fff0）0calc（（var（--fieldHeight）-var（--grandForbiddenAreaHeight））/2)/var(--grandForbiddenAreaWidth)var(--grandForbiddenAreaHeight)no-repeat,linear-gradient(0deg,var(--lineColor)2px,#00002px)0pxcalc((var(--fieldHeight)-var(--grandForbiddenAreaHeight))/2)/var(--grandForbiddenAreaWidth)2pxno-repeat小禁区和大禁区的实现是一样的，只是区域的大小不同。添加两个禁区后的效果如下：接下来画罚球弧，这是一个圆弧。渐变貌似不能简单画个弧。知道的欢迎交流。这里我们使用伪元素来实现。在伪元素的边框的基础上，添加圆角，隐藏三边边框。达到预期的效果。&::after{...border:2pxsolid#fff;边界半径：50%；背景：#0000；边框顶部颜色：#0000；左边框颜色：#0000；border-bottom-color:#0000;}这时候基本的渲染就差不多完成了，接下来再使用一个伪元素来绘制球门的位置。最后，添加体育场内的草坪效果。这里使用了重复线性渐变，代码如下：repeating-linear-gradient(90deg,#56a2240px,#56a22410px,#a9da2710px,#a9da2720px)最后完成的渲染图如下：在线代码：https：//代码。juejin.cn/pen/71...终于，完整的实现过程结束了。这只是一个实现思路。不建议在实际项目中使用。除此之外，还有很多其他的实现方法。欢迎讨论您的实施。如果看完觉得有用，记得点个赞再走。说不定哪天会用到~专注于前端开发，分享前端相关技术和干货，公众号：南城大学前端（ID：nanchengfe）
