Положите <HR>поверх коробки в CSS

Question

У меня есть определенный c стиль ящика, который я пытаюсь осуществить sh, и это меня озадачило. Вот эталонное изображение:

рамка с рамкой и дополнительным стилем

Несколько предметов, в первую очередь, я начинаю изучать адаптивный дизайн, и я ' я смог сделать это sh, но как только я начну изменять его размер, он сломается. Мне бы хотелось, чтобы коробка и часы работали как один элемент.

То, что я пробовал: - Коробка с рамкой - HR, стилизованный внутри блока div и снаружи - HR с Z-Index

Вот код:

#valuesContainer {
  border: 1px;
  border-style: solid;
  border-color: #ccc;
  font-family: sans-serif;
  font: Source;
  font-weight: normal;
  font-size: 20px;
  margin: 8%;
  padding: 5%;
  line-height: 1;
}

#valueTitle {
  font-family: sans-serif;
  font: Source;
  font-weight: 600;
  font-size: 22px;
}

#hrTop {
  width: 30vh;
  color: red;
  border-top: 5px solid #E7503D;
  position: relative;
  margin-right: -.2%;
  margin-top: -.75%;
  z-index: 999;
}

#hrTopRight {
  border: none;
  border-left:  5px solid #E7503D;
  height: 10vw;
  width:  1px;
  margin-top: -16%;
}

  <div class="row">
      <div class="col-6">
        <div id="valuesContainer" class="box">
          <hr id="hrTop"align="right">
          <h1 id="valueTitle">Title</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                 tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque                 varius morbi enim nunc. 
          </p>
          <hr id="hrTopRight"align="right">
        </div>
      </div>

Я не совсем уверен, что поступлю правильно, но любая помощь будет очень признательна. Я пытался искать, и это настолько далеко, насколько я смог получить с помощью найденной информации. '

ОБНОВЛЕНИЕ: Я не мог найти способ наградить этот ответ, так как это был комментарий , Но я считаю, что, возможно, я нашел гораздо лучший способ сделать это без использования метки HR.

t выглядит так, как будто вы используете

---

для украшения коробки, а не для обозначения разделения в вашем контенте (так как они находятся в самом начале и конце). Вместо этого вы можете использовать псевдоэлемент в #valuesContainer для наложения слоя сверху с абсолютным позиционированием (убедитесь, что #valuesContainer относительно позиционирован).

Answer 1

Попробуйте использовать position: absolute и relative на родительском div

#valuesContainer {
  border: 1px;
  border-style: solid;
  border-color: #ccc;
  font-family: sans-serif;
  font: Source;
  font-weight: normal;
  font-size: 20px;
  margin: 8%;
  padding: 5%;
  line-height: 1;
   position: relative;
}

#valueTitle {
  font-family: sans-serif;
  font: Source;
  font-weight: 600;
  font-size: 22px;
}

#hrTop {
  width: 30vh;
  color: red;
  border-top: 5px solid #E7503D;
 
    position: absolute;
top: -17px;
    right: -7px;
    z-index: -999999;
}

#hrTopRight {
  border: none;
  border-left:  5px solid #E7503D;
  height: 10vw;
  width:  1px;
  position: absolute;
    top: -14px;
    right: -8px;
}

<div class="row">
      <div class="col-6">
        <div id="valuesContainer" class="box">
          <hr id="hrTop"align="right">
          <h1 id="valueTitle">Title</h1>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod                 tempor incididunt ut labore et dolore magna aliqua. Feugiat scelerisque                 varius morbi enim nunc. 
          </p>
          <hr id="hrTopRight"align="right">
        </div>
      </div>