htmlの機能をグループ化したテンプルを作成する

Question

私は擬似クラスがグループ化機能を作ろうとしているテンプレートを作成しますが、スクリーンサイズを変更するとピクセル化してしまいます。私はそれを見てすべきかの画像が表示されます

唯一の問題はresponsivnessである

フィドル：https://jsfiddle.net/t93v93cn/

コードがある

CSS

<div class="grouping-container"> 
     <span class="groupBadge"><h4>Group1</h4></span> 
     <div class="headingContainer"> 
      <h1>Heading 1</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> 
     </div> 
     <div class="heading-container"> 
      <h1>Heading 2</h1> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
     </div> 
    </div> 

HTML

以下

.grouping-container{ 
    position:relative; 
    width:100%; 
    max-width: 70%; 
    margin: 30px auto; 
    padding: 15px 15px 50px 15px; 
    box-sizing: border-box; 
    background: #ccc; 
} 
.headingContainer,.heading-container{ 
    width: 90%; 
    max-width: 85%; 
    margin: 5px auto; 
    background: rgba(35, 122, 197, 0.4); 
    padding: 5px 25px 50px 25px 
} 
.headingContainer p,.heading-container p{ 
    font-size: 25px; 
} 
.headingContainer:before{ 
    content: ""; 
    border-top: 1px solid red; 
    padding: 0 25px; 
    position: absolute; 
    left: 34px; 
    margin-top: -6px; 

} 
.heading-container:before{ 
    content: ""; 
    border-bottom: 1px solid red; 
    padding: 0 24px; 
    position: absolute; 
    left: 33px; 
    bottom: 55px; 
} 
.groupBadge{ 
width: 108px; 
    height: 30px; 
    padding: 18px 120px; 
    display: inline-block; 
    background: #7ecaca; 
    transform: rotate(90deg); 
    position: absolute; 
    bottom: 43%; 
    left: -217px; 
} 
.groupBadge:before{ 
content: ""; 
    position: absolute; 
    padding: 5px 105px; 
    border-top: 1px solid red; 
    left: 100%; 
} 
.groupBadge:after{ 
    content: ""; 
    position: absolute; 
    padding: 5px 105px; 
    color: red; 
    border-top: 1px solid red; 
    right: 100%; 
    bottom: 7px; 
} 
.groupBadge h4{ 
    margin-top: -10px; 
    transform: rotate(180deg); 
    padding-right: 36px; 
} 

Answer 1

ここでは、擬似CSS要素を使用する柔軟で応答性の高いアプローチがあります。

これは構造が機能している方法です。

水平線（上下） -

のdiv grouping-containerを使用して、私は上部と下部を作っています水平の緑の線とafter and before pseudo要素。

.grouping-container:after { 
    content: ''; 
    background: green; 
    width: 40px; 
    height: 1px; 
    left: -40px; 
    position: absolute; 
    top: 0px; 
} 

.grouping-container:before { 
    content: ''; 
    background: green; 
    width: 40px; 
    height: 1px; 
    left: -40px; 
    position: absolute; 
    bottom: 0px; 
} 

I擬似CSSは緑色の縦線を生成する前に、使用FauxElementlineクラスでよりもっとDIVの要素を包んた垂直ラインの垂直方向のLINE-

。代わりにPX利用のemの

.FauxElementline:before { 
    content: ''; 
    background: green; 
    width: 1px; 
    height: 100%; 
    left: -40px; 
    position: absolute; 
    top: 0px; 
    bottom: 0px; 
} 

.grouping-container { 
 
    position: relative; 
 
    width: 100%; 
 
    max-width: 70%; 
 
    margin: 30px auto; 
 
    padding: 15px 15px 50px 15px; 
 
    box-sizing: border-box; 
 
    background: #ccc; 
 
} 
 

 
.headingContainer, 
 
.heading-container { 
 
    width: 90%; 
 
    max-width: 85%; 
 
    margin: 5px auto; 
 
    background: rgba(35, 122, 197, 0.4); 
 
    padding: 5px 25px 50px 25px 
 
} 
 

 
.headingContainer p, 
 
.heading-container p { 
 
    font-size: 25px; 
 
} 
 

 
.groupBadge { 
 
    width: 50px; 
 
    height: 180px; 
 
    display: inline-block; 
 
    background: #7ecaca; 
 
    position: absolute; 
 
    top: 50%; 
 
    margin-top: -90px; 
 
    left: -65px; 
 
} 
 

 
.groupBadge h4 { 
 
    margin-top: 75px; 
 
    transform: rotate(270deg) 
 
} 
 

 
.FauxElementline:before { 
 
    content: ''; 
 
    background: green; 
 
    width: 1px; 
 
    height: 100%; 
 
    left: -40px; 
 
    position: absolute; 
 
    top: 0px; 
 
    bottom: 0px; 
 
} 
 

 
.grouping-container:after { 
 
    content: ''; 
 
    background: green; 
 
    width: 40px; 
 
    height: 1px; 
 
    left: -40px; 
 
    position: absolute; 
 
    top: 0px; 
 
} 
 

 
.grouping-container:before { 
 
    content: ''; 
 
    background: green; 
 
    width: 40px; 
 
    height: 1px; 
 
    left: -40px; 
 
    position: absolute; 
 
    bottom: 0px; 
 
}

<div class="grouping-container"> 
 
    <div class="FauxElementline"> 
 

 

 
    <span class="groupBadge"><h4>Group1</h4></span> 
 
    <div class="headingContainer"> 
 
     <h1>Heading 1</h1> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p> 
 
    </div> 
 
    <div class="heading-container"> 
 
     <h1>Heading 2</h1> 
 
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
 
     It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with 
 
     desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
 
    </div> 
 
    </div> 
 
</div>