如何解决这个问题？旋转的div与背景颜色，相同的行高和适合内容宽度相结合

Question

我想要始终具有相同距离的文本行高度！我只是想重新创建Instagram故事的外观描述。

不幸的是，我的CSS中的"fit-content">选择器与的"display:block；">selector&线的高度距离并不总是与您所看到的相同。

宝贵的帮助来改进我的代码或完全改变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>