如何在html页面的直角三角形内画一个圆圈？

Question

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

输出应该类似于

Answer 1

我会考虑this previous answer 来绘制三角形，并为圆添加另一个渐变

.triangle {
  --t:10;    /* Thickness */
  --c:black; /* Color */
  --r:25px;  /* Radius*/

  width:100px;
  height:100px;
  display:inline-block;
  border:calc(var(--t)*1px) solid transparent;
  border-image:
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50%) var(--t);
  background:
    /* Left side */
    linear-gradient(to bottom left,
      transparent 49.5%,var(--c) 50% calc(50% + var(--t)*1px),
      transparent calc(50% + var(--t)*1px + 1px)),
    /* circle */
    radial-gradient(circle var(--r) at var(--r) calc(100% - var(--r)),
      transparent calc(100% - 5px), yellow calc(100% - 4px) 99%,transparent 100%);
  background-origin:border-box,padding-box;
  background-repeat:no-repeat;
}

body {
 background:pink;
}

<div class="triangle"></div>

<div class="triangle" style="--t:5;--c:blue;width:150px;--r:33px;"></div>

<div class="triangle" style="--t:8;--c:red;height:150px;--r:31px;"></div>

<div class="triangle" style="--t:15;--c:green;width:80px;--r:20px"></div>

您只需要一些数学来计算半径。相关：https://math.stackexchange.com/q/2247599/695610

如您所见，它最后是一个简单的 div，因此您可以在其中写入内容并根据需要对齐它

Answer 2

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

#right-triangle-red {
  width: 0;
  height: 0;
  border-bottom: 300px solid red;
  border-right: 500px solid transparent;
  position: relative;
}

#right-trianlg-white {
  width: 0;
  height: 0;
  border-bottom: 276px solid white;
  border-right: 461px solid transparent;
  position: relative;
  z-index: 10;
  top: 16px;
  left: 10px;
}

.triangles {
  position: relative;
}

#circle-purple {
  width: 200px;
  height: 200px;
  background: purple;
  border-radius: 50%;
  position: relative;
}

#circle-white {
  width: 190px;
  height: 190px;
  background: white;
  border-radius: 50%;
  position: relative;
  z-index: 20;
  top: 5px;
  left: 5px;
}

#circle-green {
  width: 15px;
  height: 15px;
  background: green;
  border-radius: 50%;
  position: absolute;
  z-index: 40;
  top: 86px;
  left: 86px;
}

.circles {
  position: relative;
  z-index: 20;
  top: -207px;
  left: 10px;
}

.label {
  font-size: 30px;
  color: red;
  z-index: 30;
  position: relative;
}

.label-b {
  top: -219px;
  left: 510px;
}

.label-c {
  top: -205px;
  left: -31px;
}

.label-d {
  color: green;
  top: -341px;
  left: 64px;
}

.shape-container {
  position: relative;
}

<span class="label label-a">
  A
</span>

<div class="shape-container">

  <div class="triangles">
    <div id="right-triangle-red">
      <div id="right-trianlg-white">
      </div>
    </div>    
  </div>

  <div class="circles">
    <div id="circle-purple">
      <div id="circle-white">
        <div id="circle-green">
        </div>
      </div>
    </div>    
  </div>
  
</div>

<span class="label label-b">
  B
</span>

<span class="label label-c">
  C
</span>

<span class="label label-d">
  D
</span>

Answer 3

这里有一个小例子，希望可以帮助您入门：https://jsfiddle.net/8mfx9qhj

当我试图用 CSS 做这样的事情时，我总是回到https://css-tricks.com/the-shapes-of-css/。如果您想绘制像上图这样更复杂的图表，我建议您使用 SVG 和一些绘图库（例如 http://snapsvg.io/）来代替，这将使工作变得容易得多。

来自链接 jsfiddle 的代码：

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

#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;
}

输出：