如何在html页面中绘制直角三角形内的圆？

是否可以使用CSS在HTML页面中的直角三角形内绘制一个圆。 也可以在里面放一些文字吗

输出应该类似于

---

这里有一个最简单的例子，希望能帮助您开始：

当我试图用CSS做这样的事情时，我总是回到。如果您希望绘制更复杂的图表，如上图所示，我建议您使用SVG和一些绘图库（例如），这将使工作更容易

来自链接JSFIDLE的代码：

<div id="triangle">
  <div id="circle">
    hello world
  </div>
</div>

输出：

---

您可以看到，创建形状需要大量css和嵌套html。正如@evnp所说 SVG将使您的生活更轻松

#直角三角形红色{
宽度：0；
身高：0；
边框底部：300px实心红色；
右边框：500px实心透明；
位置：相对位置；
}
#右三角白{
宽度：0；
身高：0；
边框底部：276px纯白；
右边框：461px实心透明；
位置：相对位置；
z指数：10；
顶部：16px；
左：10px；
}
.三角形{
位置：相对位置；
}
#紫色圆圈{
宽度：200px；
高度：200px；
背景：紫色；
边界半径：50%；
位置：相对位置；
}
#白色圆圈{
宽度：190px；
高度：190px；
背景：白色；
边界半径：50%；
位置：相对位置；
z指数：20；
顶部：5px；
左：5px；
}
#绿色圆圈{
宽度：15px；
高度：15px；
背景：绿色；
边界半径：50%；
位置：绝对位置；
z指数：40；
顶部：86px；
左：86px；
}
.圆圈{
位置：相对位置；
z指数：20；
顶部：-207px；
左：10px；
}
.标签{
字体大小：30px；
颜色：红色；
z指数：30；
位置：相对位置；
}
.标签-b{
顶部：-219px；
左：510px；
}
.标签c{
顶部：-205px；
左：-31px；
}
.标签-d{
颜色：绿色；
顶部：-341px；
左：64px；
}
.形状容器{
位置：相对位置；
}

A.
B
C
D
<代码> > p>我将考虑绘制三角形，并为圆
增加另一个梯度。

.triangle{
--t:10；/*厚度*/
--c：黑色；/*色*/
--r:25px；/*半径*/
宽度：100px；
高度：100px；
显示：内联块；
边框：calc（var（--t）*1px）实心透明；
边框图像：
线性渐变（到左下角，
透明49.5%，var（--c）50%，var（--t）；
背景：
/*左侧*/
线性渐变（到左下角，
透明49.5%，var（--c）50%钙（50%+var（--t）*1px），
透明计算（50%+var（-t）*1px+1px）），
/*圈*/
径向梯度（var（--r）计算（100%-var（--r））时的圆var（--r），
透明钙（100%-5px），黄色钙（100%-4px）99%，透明100%；
背景来源：边框框、填充框；
背景重复：无重复；
}
身体{
背景：粉红色；
}

有没有办法在没有SVG的情况下绘制该图？这当然是可能的，但会非常挑剔。大量的绝对定位和手动px调整。您可以使用两个重叠的三角形（一个红色，一个白色稍小）来获得三角形轮廓，然后使用两个重叠的圆（一个蓝色，一个白色稍小）来获得圆轮廓。绿线需要绝对定位，css
transform:rotate（Ndeg）
divs将非常繁琐地实现。有什么原因不能使用SVG吗？除了非常旧版本的IE和Android浏览器外，其他版本都支持浏览器：好的，我会像你说的那样使用SVG。
#triangle {
  position: relative;

  width: 0;
  height: 0;

  border-bottom: 100px solid blue;
  border-right: 150px solid transparent;
}

#circle {
  position: absolute;
  top: 30px;

  width: 38px;
  height: 38px;
  padding: 16px;

  border-radius: 50%;

  background: red;
  color: white;
}