世界杯火热进行中, 用一个div画个足球场助助兴

Posted 2022-12-01

四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用一个div完成，接下来开始正文。

足球场的尺寸

画之前首先要获取几个关键位置的尺寸，查询度娘的结果如下：

• 场地：长105米，宽68米；
• 球门：长7.32米，高2.44米；
• 大禁区（罚球区）：长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;
  --goalWidth: 4px;
  --goalHeight: 14px;

CSS倒影

这里用到了CSS倒影 box-reflect，因为只能用一个div，所以要尽可能利用现有的CSS能力，减少额外的代码量。足球场本质是一个对称图形，在这里使用CSS倒影就很合适，如果不考虑只用一个div，还可以多次使用倒影。本次CSS逻辑只实现内容左侧部分，右侧内容由 box-reflect 倒影实现。

-webkit-box-reflect: right;

实现过程

首先增加边框部分，本文所有的线条都是按2px实现。

div 
  width: calc(var(--fieldWidth) / 2);
  height: var(--fieldHeight);
  border: 2px solid var(--lineColor);

接下来开始画中心部分的圆圈，因为只使用一个div，所以将大量使用CSS渐变实现各种线条部分内容，这里需要注意的地方是有倒影的使用代码上只需要画出半圆，所以要增加 no-repeat 避免在左侧绘制出另一半圆。

radial-gradient(
  circle,
  #0000 var(--centerCircle) 0,
  var(--lineColor) calc(var(--centerCircle)),
  var(--lineColor) calc(var(--centerCircle) + 2px),
  #0000 calc(var(--centerCircle) + 2px)
) no-repeat calc(var(--fieldWidth) / 4) 50% / 100% 100%

然后绘制四个角落的角球区域圆圈，上下两个角球部分需要分开绘制，核心代码都是一样，只是 background-position 的位置不一样。

// 上面角球 1/4 圆
radial-gradient(
  circle, 
  #0000 var(--cornerCircle),
  var(--lineColor) calc(var(--cornerCircle)),
  var(--lineColor) calc(var(--cornerCircle) + 2px),
  #0000 calc(var(--cornerCircle) + 2px)
) no-repeat calc(var(--fieldWidth) / 4 * -1) calc(var(--fieldHeight) / 2 * -1) / 100%

然后绘制大禁区部分，这部分本质是一个矩形，但是左边线条和底部的线条是重合的，所以还需要绘制剩余的三根线条，这里为了减少一部分代码，其中两条线使用 conic-gradient 绘制，剩余的一条线使用 linear-gradient 绘制。

conic-gradient(
  from -90deg at right 2px bottom 2px,
   rgba(31, 157, 161, 0) 0 90deg,#fff 0) 0 calc((var(--fieldHeight) - var(--grandForbiddenAreaHeight)) / 2)/var(--grandForbiddenAreaWidth) var(--grandForbiddenAreaHeight) no-repeat,
linear-gradient(
  0deg,
  var(--lineColor) 2px,
  #0000 2px
) 0px calc((var(--fieldHeight) - var(--grandForbiddenAreaHeight)) / 2)/var(--grandForbiddenAreaWidth) 2px no-repeat

小禁区和大禁区实现方式是一样的，只是在于区域的大小尺寸不一样，增加两个禁区后的效果如下:

接下来绘制罚球弧，这个是一条圆弧，貌似渐变不能单纯的只绘制一条弧线，如果有知道的欢迎交流，这里使用伪元素实现，基于伪元素的边框加圆角并隐藏其中的三边边框即可达到期望的效果。

&::after 
  ...
  border: 2px solid #fff;
  border-radius: 50%;
  background: #0000;
  border-top-color: #0000;
  border-left-color: #0000;
  border-bottom-color: #0000;

此时的基本效果图已经差不多了，再使用另外一个伪元素绘制一下球门的位置。

最后再增加一下球场内的草坪效果。这里使用了重复线性渐变，代码如下:

repeating-linear-gradient(
  90deg,
  #56a224 0px,
  #56a224 10px, 
  #a9da27 10px, 
  #a9da27 20px
)

最后完整的效果图如下:

在线代码：https://code.juejin.cn/pen/7171244744473853991

最后

完整的实现过程就结束了，这只是一种实现的思路，在实际的项目中不建议使用，除此之外也还有很多其他的实现方式，欢迎讨论你的实现方式。看完觉得有用记得点个赞再走，收藏起来说不定哪天就用上啦~

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）