Javascript 将圆边框转换为可单击功能

我已经用div创建了一个圆。但是我正在努力将圆的边框转换成可点击的功能

我的主要实施重点是React。但是如果我在基本JS中也得到了逻辑，那么我将把它转换为react。这也是我标记react的原因

我试图实现的是：有4段圆形边框。在左上边框和左下边框上，类似于右上边框和右下边框。我想将其转换为可点击的4种不同功能。 下面预览

函数redClick（）{
}
函数blueClick（）{
}
函数greenClick（）{
}
函数orangeClick（）{
}

.circle
{
边界半径：30px；
宽度：35px；
高度：35px；
边框：4px红色实心；
边框顶部：4倍纯红；
右边框：4倍纯绿；
底部边框：4倍纯蓝；
左边框：4倍纯色橙色；
变换：旋转（45度）；
}

---

你应该把四分之一分开。它使检测你点击哪个季度变得更容易。我这里有一个例子

$（'.top left'）。单击（函数（）{
控制台日志（“左上方”）
});
$（'.top right'）。单击（函数（）{
console.log（“右上”）
});
$（'.bottom left'）。单击（函数（）{
console.log（“左下”）
});
$（'.bottom right'）。单击（函数（）{
console.log（“右下”）
});
#圆形容器{
宽度：200px；
高度：200px；
位置：相对位置；
z指数：1；
}
.填充圆{
宽度：190px；
高度：190px；
位置：绝对位置；
z指数：5；
背景色：#fff；
边界半径：190px；
保证金：5px 0px 0px 5px；
背景图像：url（'https://darko.co.za/circle-fill.png');
背景重复：无重复；
}
.四分之一{
位置：相对位置；
宽度：100px；
高度：100px
}
.四分之一填充{
位置：绝对位置；
宽度：90px；
高度：90px；
背景色：#fff；
}
.左上角填充{
底部：0；
右：0；
边框左上半径：200px；
}
.右上角填充{
底部：0；
左：0；
边框右上角半径：200px；
}
.左下角填充{
排名：0；
右：0；
边框左下半径：200px；
}
.右下角填充{
排名：0；
左：0；
边框右下半径：200px；
}
.左上角{
边框左上半径：200px；
背景：#1fb14e；
浮动：左
}
.右上角{
边框右上角半径：200px；
背景：#1ba8e0；
浮球：对
}
.左下角{
边框左下半径：200px；
背景：#fecc0b；
浮动：左
}
.右下角{
边框右下半径：200px；
背景：#de232c；
浮球：对
}
感谢它的工作@Ron Nabuurs。现在我只需要将这个逻辑转换为react