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

Question

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

输出应该类似于

标签： htmlcssgeometrypolygoncss-shapes

Answer 1

这是一个可以帮助您入门的最小示例：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;
}

输出：