I've crafted an American football field using only CSS. In my Codepen sandbox, you can find the code (I'm utilizing ReactJS).
What I'm aiming to achieve is to convert each -webkit-linear-gradient into a clickable button that logs its position on the console upon clicking. Each gradient represents a specific field position (there should be 101, including the home and away end zones). See the diagram below for reference.
While I can easily log the end zones using unique spans, I'm unsure how to proceed with the other field positions. Here's the React code:
function App() {
const printEndzone = (isHome) => {
isHome ? console.log("home endzone") : console.log("away endzone");
};
return (
<div id="football">
<span className="endzone" title="home endzone" onClick={() => printEndzone(true)}>
</span>
<span className="yard" data-yard="10"></span>
<span className="yard" data-yard="20"></span>
<span className="yard" data-yard="30"></span>
<span className="yard" data-yard="40"></span>
<span className="yard" data-yard="50"></span>
<span className="yard" data-yard="40"></span>
<span className="yard" data-yard="30"></span>
<span className="yard" data-yard="20"></span>
<span className="yard" data-yard="10"></span>
<span className="yard"></span>
<span className="endzone" title="away endzone" onClick={() => printEndzone(false)}>
</span>
</div>
);
}
export default App;
CSS:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #d1d2d3;
}
body > div {
margin: 20px auto;
}
.middle {
top: 50%;
width: 100%;
height: 1px;
position: absolute;
left: 0;
background: #120930;
display: block;
}
#football {
width: 70%;
height: 420px;
border: 3px solid #fff;
position: relative;
box-shadow: 0 0 55px #000;
margin: auto;
}
...
...
Example of a field position: