BNC Chart Labels

In this example below you will see how to do a BNC Chart Labels with some HTML / CSS and Javascript

This awesome code was written by nazarenooviedo, you can see more from this user in the personal repository.
You can find the original code on
Copyright nazarenooviedo ©
  • HTML
  • CSS
  • JavaScript
    <div class="bg">
  <div class="percentaje"><span>45deg</span></div>
  <div class="percentaje percentaje--2"><span>135deg</span></div>

/*Downloaded from */
    .bg {
  position: absolute;
  top: 50px;
  left: 50px;

  border-radius: 9999px;

  background: red;

  width: 180px;

  height: 180px;
  .percentaje {
    position: absolute;

    transform: rotate(45deg);

    z-index: 10;

    margin-top: -30%;
    margin-left: 50%;

    background: transparent;

    width: 1px;

    height: 160%;

    color: blue;
    span {
      display: block;

      transform: translate(-400%, 0) rotate(-45deg);
    &--2 {
      transform: rotate(135deg);
      span {
        transform: translate(-400%, 0) rotate(-135deg);

/*Downloaded from */