纯CSS写个绿荫足球场,为世界杯喝彩

​ 那要写出这样一个界面,首先了解一下球场结构,如图,具体比例就不坐详细说明了自行百度.

​ 颜色上白线绿地没啥问题,发球弧和角球线通过父级的覆盖可以做到部分弧线效果.

先看一下整体效果:

---

具体地:

1 )场地外围我们使用混合色:

background: radial-gradient(sandybrown,maroon);

2 )线条我们要自定义白粗线:

--line: 0.3em solid white; 
border: var(--line);

3 )定下整个container容器之后,field为球场区域作为定位父体,内部span通过absolute定位:

.container{
   display:block;}
.field{
   position:relative:
        width:inherit;
        height:ingerit;}

4 )位置的具体数值可通过数学关系确定:

calc(计算式子)

5 )css中数值可以通过 –变量名 的形式记录某一数值,后续通过

var(–变量名)调用:

body{
         --num = calc((100px + 0.7px)/3);
        top:var(--num);}

6 )然后就是关于角球线,可以两种方法

方法一::before/after在隐藏边角线的应用.

/*:before 选择器在被选元素的内容前面插入内容。

请使用 content 属性来指定要插入的内容。*/
.corner-arc::after,
.corner-arc::before{
        content: '';
        position: absolute;
        width: 5em;
        height: 5em;
        border: 0.3em solid white;
        border-radius: 50%;}

方法二:制作两个扇形,定位到相应位置.

.corner-arc-bottom ,
.corner-arc-top{
        width: 100px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        border: 0.3em solid white;
        border-radius:  0  100px 0 0    ;
        position: absolute;
        top:880px;