football pitch

HTML
<h2> if you know how to paint half a circle using gradients only!!! tell me please so that we finish the pitch and kick-off the match></h2><div class="pitch"></div>
CSS
body{ } .pitch{ width:600px; height:325px; margin:100px auto; background: linear-gradient(to bottom,white,white 1%,transparent 1% ,transparent 99%,white 99%,white 100%), linear-gradient(to right,white,white 1%,transparent 1%,transparent 49%,white 49%,white 50%,transparent 50%,transparent 99%,white 99%, white 100%), linear-gradient(to right,transparent 11%,white 11%,white 12%,transparent 12%,transparent 88%,white 88%, white 89%,transparent 89%), linear-gradient(to bottom,transparent 25%,white 25%,white 26%,transparent 26%,transparent 75%,white 75%,white 76%,transparent 76%), linear-gradient(to bottom,transparent 25%,white 25%,white 26%,transparent 26%,transparent 75%,white 75%,white 76%,transparent 76%), linear-gradient(to bottom,transparent 38%, 38%,white 39%,transparent 39%), linear-gradient(to bottom,transparent 58%,white 58%,white 59%,transparent 59%) , linear-gradient(to bottom,transparent 38%, white 38%,white 39%,transparent 39%), linear-gradient(to bottom,transparent 58%,white 58%,white 59%,transparent 59%), linear-gradient(to right,transparent 3%,white 3%,white 3.5%,transparent 3.5%,transparent 96.5%,white 96.5%,white 97%,transparent 97%), radial-gradient(25px circle at 1% 0%,transparent 85%,white 85%, white 99%,transparent 99%), radial-gradient(25px circle at 99% 0%,transparent 85%,white 85%, white 99%,transparent 99%), radial-gradient(25px circle at 0% 99%,transparent 85%,white 85%, white 99%,transparent 99%), radial-gradient(25px circle at 99% 100%,transparent 85%,white 85%, white 99%,transparent 99%), radial-gradient(105px circle at 49.5% 50%,white,white 5%,transparent 5%,transparent 97%,white 97%,white 99%,transparent 99%), radial-gradient(3px circle at 8% 50%,white,white 99%,transparent 99%), radial-gradient(3px circle at 92% 50%,white,white 99%,transparent 99%) ; background-color:rgba(0,255,0,0.7); background-size: 100% 100%, 100% 100%, 101.5% 50%, 10.5% 100%, 10.5% 100%, 5% 100%, 5% 100%, 5% 100%, 5% 100%, 94% 21%, 100%, 100%, 100%, 100%, 100%, 100%; background-position: 50%, 50%, 50%, 1%, 99%, 99%, 1%, 1%, 99%, 50% 48.4%, 50%, 50%, 50%, 50%, 50%; background-repeat:no-repeat; }
JAVASCRIPT
Expand for more options Login