Html 篮球投篮图css形状

这些形状在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;
}

---

正如[Adriani6][1]所说，使用svg会更好

我添加了

：悬停
状态，以便您可以看到区域边界：


正文{
背景#2b2b；
}
.法庭{
填充：#7a7a；
冲程：#2b2b；
笔画宽度：4；
行程限制：10；
}
.区域{
填充：#7a7a；
冲程：#2b2b；
笔画宽度：4；
行程限制：10；
}
.区域：悬停{
填充：#FEA400；
光标：指针；
}

border radius？如果你尝试了很多，那么把你的代码放在这里，解释一下你尝试了什么，它看起来如何，问题是什么：看看HTML5 SVG？谢谢@Adriani6，SVG可能就是它所需要的。你太棒了，@joshmoto。。而且它也很灵敏。。svg是实现go@joshmoto-很棒的解决方案！