篮球投篮图表CSS形状

Question

在CSS中这些形状可能吗？我已经做了很多尝试，但似乎没有任何效果。

我发现很难获得正确的曲率。

我的无效代码：

 .col4 {
    width: 19%;
    height: 68%;
    background-color: transparent;
    border-radius: 0px 0px 0px 72px;
    border-left: 10px solid red;
    border-right: 10px solid blue;
    border-bottom: 10px solid green;
    border-top: 10px solid yellow;
}

Answer 1

正如[Adriani6] [1]所说的那样，使用svg会更好。

我添加了:hover状态，以便您可以看到区域边界：

body {
  background: #2B2B2B;
}

.court {
  fill: #7A7A7A;
  stroke: #2B2B2B;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.zone {
  fill: #7A7A7A;
  stroke: #2B2B2B;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.zone:hover {
  fill: #FEA400;
  cursor: pointer;
}

<svg id="basketball" x="0px" y="0px" viewBox="0 0 1280 1024">
  <rect x="25" y="31" class="court" width="1228" height="771"></rect>
  <rect x="25" y="31" class="zone" width="180" height="426"/>
  <rect x="1073" y="31" class="zone" width="180" height="426"/>
  <rect x="205" y="31" class="zone" width="234" height="250"/>
  <rect x="839" y="31" class="zone" width="234" height="250"/>
  <rect x="439" y="31" class="zone" width="200" height="250"/>
  <rect x="439" y="281" class="zone" width="200" height="250"/>
  <path class="zone" d="M439,687.6v114.5h400v-115c-61,28.4-128.9,44.3-200.5,44.3C567.3,731.5,499.7,715.8,439,687.6z"/>
  <path class="zone" d="M439,531v156.6c60.7,27.8,128.3,43.4,199.5,43.4c71.6,0,139.5-15.7,200.5-43.8V531H439z"/>
  <path class="zone" d="M205,457h0.1c0-0.1-0.1-0.2-0.1-0.3V457z"/>
  <path class="zone" d="M205,281v175.7c0,0.1,0.1,0.2,0.1,0.3C253.5,558.7,336.5,640.7,439,687.6V531v-74V281H205z"/>
  <path class="zone" d="M1073,457v-2.4c-0.4,0.8-0.8,1.6-1.2,2.4H1073z"/>
  <path class="zone" d="M839,281v176v74v156.2c102-47,184.7-128.8,232.8-230.2c0.4-0.8,0.8-1.6,1.2-2.4V281H839z"/>
  <rect x="639" y="281" class="zone" width="200" height="250"/>
  <rect x="639" y="31" class="zone" width="200" height="250"/>
</svg>