怎么解决这个问题？旋转div与背景颜色、同线高度和合适的内容宽度相结合。

Question

我想要的文字线-高度与相同的距离始终！我只想重新创建Instagram故事的外观描述。

不幸的是，我的CSS中的"fit-content"选择器与"display: 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>

​