html - 创建具有 html 功能分组的模板

Question

我创建了一个模板，其中我使用了一个跨度，其中伪类试图制作分组功能，但是当我更改屏幕大小时它变得像素化，你能帮我解决这个问题吗？我将展示图像的外观

唯一的问题是响应能力

fiddle :https://jsfiddle.net/t93v93cn/

代码如下

HTML

   <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>

CSS

.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

Here is a flexible , responsive approach Using pseudo css elements.

结构是这样运作的:

The horizontal lines(Top and Bottom)-

使用 div grouping-container 我正在用 after and before pseudo 元素制作top and bottom horizo​​ntal green line。

.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;
}

The vertical Line-

对于垂直线，我使用 FauxElementline 类将元素包装在更多的 div 中，该类在伪 css 生成绿色垂直线之前使用。

.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>