如何在 HTML 中制作跑道或自定义形状？

Question

我正在尝试制作一个供高中和大学使用的田径应用程序，并希望制作一个可选择的曲目。 我的目标是能够分别按下每个车道，我怎样才能画出这个形状并单独按下每个车道？ 有没有办法在 HTML 中制作完全独特的形状？

我目前的形状是椭圆形，轨道显然不是椭圆形。 我的一位朋友建议使用三种形状，末端有两个圆圈，中间有一个矩形，然后使它们都可点击。

这是我试图完成的视觉尝试，下面是不太吸引人的方式

 .circle { height: 95px; width: 200px; background-color: tomato; border-radius: 75%; }

 <!-- LANES --> <h2>Lanes on Curve</h2> <form action="/action_page.php"> <select name="lanes"> <option value="6">6</option> <option value="8">8</option> <option value="10">10</option> </select> </form> <h2>Lanes on Straight</h2> <form action="/action_page.php"> <select name="lanes"> <option value="6">6</option> <option value="8">8</option> <option value="10">10</option> <option value="12">12</option> </select> </form>

Answer 1

我使用绝对 div 并根据曲目编号偏移它们的位置来快速完成此操作。 您可以将鼠标悬停在赛道上并查看各个车道的颜色变化。

 .track-outer { position: relative; } .track { border: 10px solid #B27569; transition: all ease-in-out 200ms; position: absolute;} .track:hover {border: 10px solid #825046; cursor:pointer} .track:hover::before{ background:#825046;} .track::before {content: ""; background:#B27569; height: 10px; position:absolute; bottom:-11px; width:100px; border-top:1px solid #fff; border-bottom:1px solid #fff; transition: all ease-in-out 200ms;} /* position changes by 11px every track, size changes by 22, border-rad by 10 */ .track1 { height: 200px; width: 450px; border-radius:100px; left:0; top:0; } .track1::before {left: 0;} .track2 { height: 178px; width: 428px; border-radius:90px; left:11px; top:11px; } .track2::before {left: -11px;} .track3 { height: 156px; width: 406px; border-radius:80px; left:22px; top:22px; } .track3::before {left: -22px;} .track4 { height: 134px; width: 384px; border-radius:70px; left:33px; top:33px; } .track4::before {left: -33px;} .track5 { height: 112px; width: 362px; border-radius:60px; left:44px; top:44px; } .track5::before {left: -44px;}

 <div class="track-outer"> <div class="track track1"></div> <div class="track track2"></div> <div class="track track3"></div> <div class="track track4"></div> <div class="track track5"></div> </div>