右フルラインの作り方

Question

賢明な数字をつけていますが、レスポンスに何か問題があります。それは、小さな画面の水平スクロールバーで一番上の赤い線を上にしたときです。

このリンクをクリックして、参照してください - jsfiddle

<div class="container"> 
 
    <br><br> 
 
    <div class="col-md-8"> 
 
    <div class="row"> 
 
     <div class="col-md-12"> 
 
     <div class="career-area"> 
 
      <div class="top-border"></div> 
 
      <div class="car-Circle1"> 
 
      <i><b>01</b></i> 
 
      </div> 
 

 
      <div class="car-Circle2"> 
 
      <i><b>02</b></i> 
 
      </div> 
 

 
      <div class="car-Circle3"> 
 
      <i><b>03</b></i> 
 
      </div> 
 

 
      <div class="car-Circle4"> 
 
      <i><b>04</b></i> 
 
      </div> 
 

 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

水平スクロールバーがhiddenに.top-borderのオーバーフローを設定することによって除去することができます。

あり

.career-area .top-border { 
    width: 100%; 
    border-radius: 50px 0px 0px 0px; 
    border-top: solid 19px #cc3053; 
    border-left: solid 19px #cc3053; 
    height: 145px; 
    position: relative; 
    z-index: 1; 
    overflow: hidden; 

Answer 2

私はそれを再設計しようとし、あなたの助けに次のコードを提案します。 1. .top-borderに.career-areaを入力すると、次のコードが使用されます。

.career-area .top-border:after { 
    content: ""; 
    border-top: solid 19px #cc3053; 
    top: -19px; 
    width: 100%; 
    right: calc(100px - 100%); 
    /* position: absolute; */ 
} 

2. .top-border使用.containerでは、コードを以下の場合。

.container 
{ 
    overflow: hidden; 
} 
.career-area .top-border:after { 
    content: ""; 
    border-top: solid 19px #cc3053; 
    top: -19px; 
    width: 100%; 
    right: calc(1px - 100%); 
    position: absolute; 
} 

2.画面幅が.top-borderの場合、次のコードを使用してください。

html,body{ overflow: hidden; }

.career-area .top-border:after { 
     content: ""; 
     border-top: solid 19px #cc3053; 
     top: -19px; 
     width: 100%; 
     right: calc(1px - 100%); 
     position: absolute; 
    } 

このコードは、あなたの全体の幅は、親絶頂とオーバーフロー隠し隠すオーバーフローの境界線を継承していない非表示になります。