如何在HTML中创建跑道或自定义形状？

Question

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

我目前的形状是椭圆形，轨道显然不是椭圆形。我的一位朋友建议使用三种形状，最后两个圆圈和中心的一个矩形，然后将它们全部点击。

这是我试图完成的视觉尝试，下面是不那么引人注目的方式

＆＃13;

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

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>