Search code examples
htmlcssgeometrypolygoncss-shapes

How to draw a circle inside a right angled triangle in html page?

Is it possible to draw a circle inside a right angled triangle in an HTML page using CSS. Is it also possible to put some text inside it?

The output should be something like

enter image description here

Solution

  • Here's a minimal example that can hopefully get you started: https://jsfiddle.net/8mfx9qhj

    I always end up back at https://css-tricks.com/the-shapes-of-css/ when trying to do things like this with CSS. If you're looking to draw a more complex diagram like the image above, I'd recommend doing it with SVG and some drawing library (e.g. http://snapsvg.io/) instead, which will make the job a lot easier.

    Code from linked 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;
}

    Output:

    trianglecircle