CSSでノート風の罫線デザインを作りたい。

Question

下記デザイン見本のようなノート風の罫線デザインを仕上げたいです。

以下のコードで実現しようと試みました。

<div class="note8">
 <div class="sen8">
   <div class="note">   
       <div class="note-title">追伸:</div>                    
               最後に、断言しておきます。<br>    
               わずか12か月の間に、これだけの<span class="letter_ps__warning">車検台数を成功確率100%で増やせるのは、私達だけ</span>です。<br>    
               類似の車検FCの加盟店実績と見比べてみてください。<br>    
               私達XXXの加盟店は商圏や立地に違いがあっても、<span class="letter_ps__warning">加盟店の83％が年間車検台数1,000台<br>を越えています。</span>こんな実績があるのは私達だけです。<br>    
               もし、あなたが車検台数を増やして地域で信頼させる繁盛店を目指しているなら、まずは<span class="letter_ps__warning">説明会に<br>お越しください。</span><br>    
               なお、XXXに加盟できる地域は次々と埋まってきておりますので、目の前のチャンスを逃さない<br>ようにご注意ください。  
          </div>
<!---note---->
        </div>
<!--sen8--->
    </div>
<!--note8--->

            .note8{
                font-weight: bold;
                background-color: #fffdeb;
                box-shadow:  5px 5px 10px 0 grey;
                transform: rotate(-3deg);
                padding:35px 57px;
                width: 1200px;
                .sen8{
                    background-color: #fffdeb;
                    background-image:
                    linear-gradient(90deg, rgba(255, 246, 230, 0) 0%, rgba(255, 246, 230, 0) 50%, #fffdeb 0%, #fffdeb 100%), 
                    linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #000 100%);
                    background-size: 8px 100%,100% 4em;
                    line-height: 4.1em;
                    width: 100%;
                    .note{
                        .note-title{
                            @include f(44,$reimin-b,100);
                        }
                        @include f(22,$reimin-b,100);
                            .letter_ps__warning{
                                color: $secondary_base;
                                    }
                    }
                  }
              }

上記、自分が書いたコードの結果は以下です。

デザイン見本と自分のコードプレビューの異なる点は、

●「追伸:」の上に薄い線が入っている。
●「追伸:」から下罫線までの距離が他のテキストと揃っていない。
●デザイン見本は罫線と罫線の間の下寄りにテキストが配置されているが、自分の場合、罫線と罫線の間の中央にテキストがきている。

以上の点を修正したいです。

どのようにすれば、見本の通りのデザインを実現できるでしょうか。

Answer 1

コードそのものをサイトを参考に以下のように書き直しました。

                <div class="dashed-note">
                    <div class="note-title">追伸:</div>   
                    <div class="dashed-note_inner">
                    <p class="note_txt"> 最後に、断言しておきます。<br>    
                        わずか12か月の間に、これだけの<span class="letter_ps__warning">車検台数を成功確率100%で増やせるのは、私達だけ</span>です。<br>    
                        類似の車検FCの加盟店実績と見比べてみてください。<br>    
                        私達XXXの加盟店は商圏や立地に違いがあっても、<span class="letter_ps__warning">加盟店の83％が年間車検台数1,000台<br>を越えています。</span>こんな実績があるのは私達だけです。<br>    
                        もし、あなたが車検台数を増やして地域で信頼させる繁盛店を目指しているなら、まずは<span class="letter_ps__warning">説明会に<br>お越しください。</span><br>    
                        なお、XXXに加盟できる地域は次々と埋まってきておりますので、目の前のチャンスを逃さない<br>ようにご注意ください。 </p>
                    </div>
                </div>

              .dashed-note {
                font-weight: bold;
                background-color: #fffdeb;
                box-shadow:  5px 5px 10px 0 grey;
                transform: rotate(-3deg);
                padding:35px 57px;
                width: 1180px;
                margin: 0 auto;
                  .note-title{
                    @include f(44,$reimin-b,100);
                    line-height: 1.75;
                  }
                  .dashed-note_inner{
                background-color: #fffdeb; /* 背景色 */
                background-image: linear-gradient(90deg, transparent 0%, transparent 50%, #fffdeb 50%, #fffdeb 100%), /* 点線1の色 */
                                  linear-gradient(180deg, #000 1px, transparent 1px); /* 点線2の色と太さ */
                background-size: 9px 100%, /* 点線1のサイズ */
                                 100% 3.5em; /* 点線2のサイズ */
                line-height: 3.5em; /* 文字の高さ */
                padding-bottom: 1px; /* 最終行の下にも罫線を引く */
                .note_txt{
                    @include f(22,$reimin-b,80);
                    .letter_ps__warning{
                        color: $secondary_base;
                            }
                }
            }
              }
コード

これで「追伸」の上にうっすら入っていた線は消え、ほぼデザイン通りの見た目を実現できました。