Как это исправить? Вращенные элементы div в сочетании с цветом фона, одинаковой высотой строки и шириной подгонки

Question

Я хочу, чтобы высота строки текста всегда была на одном и том же расстоянии! Я просто хочу воссоздать описание истории в Instagram.

К сожалению, селектор «fit-content» в моем CSS не работает должным образом вместе с блоком отображения : block; селектор и расстояние до высоты строки не всегда совпадает с тем, что вы видите.

Драгоценная помощь для улучшения моего кода или полного изменения структуры CSS? (Ответ на скрипку, пожалуйста)

html, body{margin:0;}

.cover{  background: url("https://static.vibe.com/files/2017/06/maxresdefault-1-1497716219-compressed.jpg") fixed center;padding:2rem;box-sizing:border-box;}

.cover-2{  background: url("https://thimk.files.wordpress.com/2010/01/source-june-1998-105_1.jpg") fixed center;
  background-size:cover;
  padding:5rem;box-sizing:border-box;}

.header { 
  background-color: red;
  color:white;
  border-radius:5px;  
  display:inline-block;
}


p{
  margin:1px;
  font-family:helvetica;font-weight:bold; }

#border-box { 
 display: block;
 width: fit-content;
 padding:4px;
  font-size:5vw;
  -ms-transform: rotate(5deg); /* IE 9 */
  -webkit-transform: rotate(5deg); /* Safari */
  transform: rotate(5deg);}

#border-box-2 { 
 display: block;
 text-align:right;
 width: fit-content;
 padding:4px;
  font-size:4vw;  
  background:white;
  color:black;
  -ms-transform: rotate(-5deg); /* IE 9 */
  -webkit-transform: rotate(-5deg); /* Safari */
  transform: rotate(-5deg);}

<section class="cover">
<div class="header" id="border-box"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box"><p>In the first div here</p></div>
<br>
<div class="header"id="border-box"><p>This look like this</p></div>
<br>
<div class="header" id="border-box"><p>In the first demo</p></div>
<br>
<div class="header" id="border-box"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box"><p>In the first div here</p></div>
<br>
<div class="header" id="border-box"><p>This look like this</p></div>
<br>
<div class="header"id="border-box"><p>In the first demo</p></div>
<br>
</section>
<section class="cover-2">
<div class="header" id="border-box-2"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box-2"><p>In the first div here</p></div>
<br>
<div class="header" id="border-box-2"><p>This look like this</p></div>
<br>
<div class="header" id="border-box-2"><p>In the first demo</p></div>
<br>
<div class="header" id="border-box-2"><p>This paragraph the content.</p></div>
<br>
<div class="header" id="border-box-2"><p>In the first div here</p></div>
<br>
<br>
</section>

СМОТРИТЕ НА МОЮ СКРЕПКУ: https://jsfiddle.net/CAT999/hg2op0zu/

Answer 1

Настройте transform-origin и сделайте его левым, и вы можете упростить свой код, как показано ниже:

html,
body {
  margin: 0;
}

.cover {
  background: url("https://static.vibe.com/files/2017/06/maxresdefault-1-1497716219-compressed.jpg") fixed center;
  padding: 2rem;
  box-sizing: border-box;
}

.cover-2 {
  background: url("https://thimk.files.wordpress.com/2010/01/source-june-1998-105_1.jpg") fixed center;
  background-size: cover;
  padding: 5rem;
  box-sizing: border-box;
}

p {
  background-color: red;
  color: white;
  border-radius: 5px;
  display: table; /* instead of fit-content */
  margin: 5px 5px 1vw; /* control the distance using margin-bottom*/
  font-family: helvetica;
  font-weight: bold;
  padding: 4px;
  font-size: 5vw;
  transform: rotate(5deg);
  transform-origin: left;
}


.cover-2 p {
  background: white;
  transform: rotate(-5deg);
  color:#000;
}

<section class="cover">
  <p>This paragraph the content.</p>

  <p>In the first div here</p>

  <p>This look like this</p>

  <p>In the first demo</p>

  <p>This paragraph the content.</p>

  <p>In the first div here</p>

  <p>This look like this</p>

  <p>In the first demo</p>
</section>

<section class="cover-2">
  <p>This paragraph the content.</p>

  <p>In the first div here</p>

  <p>This look like this</p>

  <p>In the first demo</p>

  <p>This paragraph the content.</p>

  <p>In the first div here</p>

</section>