世界杯火热进行中, 用一个 div 画个足球场助助兴
四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用 CSS 画一个足球场，正常的用 CSS 布局肯定是非常 easy 的，所以决定只用一个 div 完成，接下来开始正文。
足球场的尺寸
画之前首先要获取几个关键位置的尺寸，查询度娘的结果如下：
场地：长 105 米，宽 68 米；
球门：长 7.32 米，高 2.44 米；
大禁区（罚球区）：长 40.32 米，宽 16.5 米；
小禁区（球门区）：长 18.32 米，宽 5.5 米
中圈区：半径 9.15 米；
角球去：半径 1 米；
罚球弧：半径 9.15 的半圆
基于这份数据定义一些基本的变量，本次实现基于上面的值乘以 2 作为像素值，部分小区域数值有所调整。整体变量定义如下：
CSS 倒影
这里用到了 CSS 倒影 box-reflect，因为只能用一个 div，所以要尽可能利用现有的 CSS 能力，减少额外的代码量。足球场本质是一个对称图形，在这里使用 CSS 倒影就很合适，如果不考虑只用一个 div，还可以多次使用倒影。本次 CSS 逻辑只实现内容左侧部分，右侧内容由 box-reflect 倒影实现。
实现过程
首先增加边框部分，本文所有的线条都是按 2px 实现。
接下来开始画中心部分的圆圈，因为只使用一个 div，所以将大量使用 CSS 渐变实现各种线条部分内容，这里需要注意的地方是有倒影的使用代码上只需要画出半圆，所以要增加 no-repeat 避免在左侧绘制出另一半圆。
然后绘制四个角落的角球区域圆圈，上下两个角球部分需要分开绘制，核心代码都是一样，只是 background-position 的位置不一样。
然后绘制大禁区部分，这部分本质是一个矩形，但是左边线条和底部的线条是重合的，所以还需要绘制剩余的三根线条，这里为了减少一部分代码，其中两条线使用 conic-gradient 绘制，剩余的一条线使用 linear-gradient 绘制。
小禁区和大禁区实现方式是一样的，只是在于区域的大小尺寸不一样，增加两个禁区后的效果如下:
接下来绘制罚球弧，这个是一条圆弧，貌似渐变不能单纯的只绘制一条弧线，如果有知道的欢迎交流，这里使用伪元素实现，基于伪元素的边框加圆角并隐藏其中的三边边框即可达到期望的效果。
此时的基本效果图已经差不多了，再使用另外一个伪元素绘制一下球门的位置。
最后再增加一下球场内的草坪效果。这里使用了重复线性渐变，代码如下:
最后完整的效果图如下:
在线代码：https://code.juejin.cn/pen/7171244744473853991
最后
完整的实现过程就结束了，这只是一种实现的思路，在实际的项目中不建议使用，除此之外也还有很多其他的实现方式，欢迎讨论你的实现方式。看完觉得有用记得点个赞再走，收藏起来说不定哪天就用上啦~
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/9a32ad477840513ccaddac3b6】。文章转载请联系作者。
还未添加个人签名 2019-02-12 加入
专注前端开发，分享前端知识
评论