CSSでborderプロパティを使った縦線での実装

Question

画像の左上のborderデザインを実装したいのですが、セクションの上部からぴったりくっついた表現にしたいのですが上手く配置できませんのでご教授頂けたらありがたいです。
宜しくお願い致します。

考えたコード

<section class="section-wrapper">
      <h2 class="section-title section-title-border">CONTACT</h2>
      <div class="section-inner">
        <p class="concept-lead">
       Texttext        </p>
        <div class="concept-content">
          <p class="concept-text">
            Texttext 
          </p>
          <div class="concept-img-wrapper">
            <img src="./img/[e-mail]" alt=" Texttext ">
          </div>
        </div>
      </div>
      <div class="section-bottom text-right">Our Concept</div>
    </section>





.section-title {
    max-width: 1000px;
    color: #282f35;
    font-size: 3rem;
    font-style: italic;
    margin: 0 auto 80px;
    padding: 0 20px;
    text-align: left;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    display: inline-block;
    margin-left: 120px;
}
.section-title-border{
  border-left: thick solid #282f35;
  padding-left: 10px;
}
.section-inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 50px;
}
.section-wrapper{
  padding: 100px 0 70px;
}

Comments

[Lhankor_Mhy]

HTMLもご提示ください。

[cherry8866]

ありがとうございます！今追加致しました、画像と少し内容違いましてすみませんが宜しくお願い致します！

Answer 1

.section-titleのマージンの値をこうするとか

margin: -100px  0px 0px 120px;

Comments

[cherry8866]

早速ありがとうございます！ぴったりくっつきました！
また、borderの途中位からcontactの文字を配置したいのですが、
contactにマージンを当てれば良いのでしょうか・・？
度々すみません。。

[yambejp]

<h2 class="section-title section-title-border"><span>CONTACT</span></h2>
のようにspanを差し込んで、そのspanにmargin-topをつければよいでしょう

[cherry8866]

なるほど！とても勉強になりました。ありがとうございました！