用CSS画简陋的足球⚽

---

前言

今年看了很多次世界杯的比赛，从中也学习到了很多意想不到的东西。下面用CSS来尝试画一下⚽

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML部分

代码如下（示例）：

<header class="circle">
    <div class="f1"></div>
    <div class="s1"></div>
    <div class="j1"></div>
    <div class="s2"></div>
    <div class="j2"></div>
    <div class="s3"></div>
    <div class="b1"></div>
    <div class="j3"></div>
    <div class="b2"></div>
    <div class="six"></div>
    <div class="j4"></div>
    <div class="j5"></div>
    <div class="j6"></div>
    <div class="j7"></div>
</header>
<nav>⚽，让生活更奇妙</nav>

二、CSS部分

代码如下（示例）：

<style>
        body{
            background-color: greenyellow;
        }
        .circle{
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-color: black;
        }

        /*五边形下图形*/
        .f1{
            position: relative;
            height: 83px;
            width: 50px;
            border-width: 60px 35px 0;
            border-style: solid;
            top: 140px;
            left: 90px;
            border-color: black transparent;
        }
        /*五边形上图形*/
        .f1:before{
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            left: -35px;
            border-width:0 60px 50px;
            border-style: solid;
            border-color: transparent transparent  black;
            top: -110px;
        }
        /*长方形*/
        .s1{
            position: relative;
            width: 120px;
            height: 50px;
            border-width: 58px 35px 0;
            margin: 50px auto;
            top: -105px;
            left: -61px;
            background-color: white;
        }

        /*梯形*/
        .j1{
            position: relative;
            width: 68px;
            height: 50px;
            border-top: 68px solid transparent;
            border-left: 50px solid transparent;
            border-right: 0 solid transparent;
            border-bottom: 68px solid white;
            top: -391px;
            left: 30px;
        }

        /*三角形*/
        .s2{
            position: relative;
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-left: 59px solid transparent;
            border-right: 0 solid transparent;
            border-bottom: 50px solid black;
            top: -490px;
            left: 90px;
        }

        /*梯形*/
        .j2{
            position: relative;
            width: 68px;
            height: 50px;
            border-top: 68px solid transparent;
            border-left: 0 solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 68px solid white;
            top: -727px;
            left: 149px;
        }

        /*长方形*/
        .s3{
            position: relative;
            width: 120px;
            height: 50px;
            border-width: 58px 35px 0;
            margin: 50px auto;
            top: -777px;
            left: 60px;
            background-color: white;
        }

        /*三角形*/
        .b1{
            position: relative;
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-left: 0 solid transparent;
            border-right: 59px solid transparent;
            border-bottom: 50px solid black;
            top: -976px;
            left: 150px;
        }

        /*梯形*/
        .j3{
            position: relative;
            width: 64px;
            height: 49px;
            border-top: 64px solid transparent;
            border-left: 0 solid transparent;
            border-right: 48px solid transparent;
            border-bottom: 64px solid white;
            top: -1094px;
            left: 20px;
        }

        /*三角形*/
        .b2{
            position: relative;
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-left: 8px solid transparent ;
            border-right: 35px solid white;
            border-bottom: 63px solid transparent;
            top: -1210px;
            left: -8px;
        }

        /*六边形*/
        .six{
            position: relative;
            width: 50px;
            height: 98px;
            margin: 50px auto;
            top: -1305px;
            left: 1px;
            background-color: white;
        }
        .six:before{
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            right: 50px;
            border-width:50px 33px;
            border-style: solid;
            border-color: transparent white transparent transparent;
        }
        .six:after{
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            left: 50px;
            border-width:50px 33px;
            border-style: solid;
            border-color: transparent transparent transparent white;
            top: 0;
        }

        /*梯形*/
        .j4{
            position: relative;
            width: 68px;
            height: 15px;
            border-top: 50px solid white;
            border-left: 0 solid transparent;
            border-right: 45px solid transparent;
            border-bottom: 50px solid transparent;
            top: -1455px;
            left: 30px;
        }

        /*梯形*/
        .j5{
            position: relative;
            width: 68px;
            height: 60px;
            border-top: 60px solid transparent;
            border-left: 45px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 60px solid white;
            top: -1750px;
            left: 168px;
        }

        /*梯形*/
        .j6{
            position: relative;
            width: 60px;
            height: 48px;
            border-top: 48px solid white;
            border-left: 40px solid transparent;
            border-right: 20px solid transparent;
            border-bottom: 48px solid transparent;
            top: -1750px;
            left: 168px;
        }

        /*梯形*/
        .j7{
            position: relative;
            width: 60px;
            height: 50px;
            border-top: 50px solid white;
            border-left: 15px solid transparent;
            border-right: 8px solid transparent;
            border-bottom: 50px solid transparent;
            top: -2003px;
            left: 205px;
        }

        nav{
            font-family: 华文彩云,sans-serif;
            font-weight: bold;
            font-size: 34px;
            text-align: center;
        }
    </style>

二、效果展示

总结

⚽，让生活更奇妙