「CSSで斜め45度のリボンを配置する時の計算式」のデモ

<div class="parent">
  <div class="brook brook-after">
    45度
  </div>
</div>

  .parent{
    position: relative;
    overflow: hidden;
  }

  .brook-after{
    $width: 400px;
    $top: 40px;
    
    width: $width;
    text-align: center;
    position: absolute;
    top: $top;
    left:( $width * -1 / 2 + $top );
    transform: rotate(-45deg);
    transform-origin: top center;
    padding: 15px ( $width / 2 - $top * 1.414 );
    box-sizing: border-box;
  }

  .parent{
    position: relative;
    overflow: hidden;
  }
  
  .brook-after{
    width: 400px;
    text-align: center;
    position: absolute;
    top: 40px;
    left:calc( -400px / 2 + 40px );
    transform: rotate(-45deg);
    transform-origin: top center;
    padding: 15px calc( 400px / 2 - 40px * 1.414 );
    box-sizing: border-box;
  }