如何使用CSS獲取這些文本輸出？

Question

我需要這種類型的輸出。我已經完成了傾斜的背景，但文本是剩餘的，我需要這種類型的文本安排？

，但我得到這個代替：

.carousel-caption { 
 
    position: absolute; 
 
    background-color: #3e3273; 
 
    right: 25%; 
 
    left: 10%; 
 
    transform: skew(18deg, 0deg); 
 
    padding: 15px 45px; 
 
} 
 

 
.carousel-caption h3 { 
 
    font-size: 35px; 
 
    transform: skew(-18deg, 0deg); 
 
    font-family: "MyriadPro-Regular"; 
 
    margin-top: 10%; 
 
    color: #fff; 
 
    text-align: left; 
 
}

<div class="carousel-caption"> 
 
    <h3>Hey guys<br> please help me,<br> with this output</h3> 
 

 
</div>

Answer 1

簡單地使用無間斷間隔（ ）是這樣的...

.carousel-caption { 
 
    position: absolute; 
 
    
 
    background-color: #3e3273; 
 
    right: 25%; 
 
    left: 10%; 
 
    transform: skew(18deg, 0deg); 
 
    padding: 15px 45px; 
 
} 
 

 
.carousel-caption h3 { 
 
    font-size: 35px; 
 
    transform: skew(-18deg, 0deg); 
 
    font-family: "MyriadPro-Regular"; 
 
    margin-top: 10%; 
 
    color: #fff; 
 
    text-align: left; 
 
}

<div class="carousel-caption"> 
 
      <h3>Hey guys 
 
      <br>&nbsp;please help me 
 
      <br>&nbsp;&nbsp;with this output 
 
      </h3> 
 
</div>

https://jsfiddle.net/bw63uevw/

Answer 2

訣竅是不是「去斜」的H3本身，而是把它裏面的一些塊元素和「去斜」的。這樣，它們將被正確定位。
（請注意，我用的跨度爲H3內部的線路，因爲使用流量的內容，如申報單將根據驗證器是一個錯誤。）

.carousel-caption { 
 
    position: absolute; 
 
    background-color: #3e3273; 
 
    right: 25%; 
 
    left: 10%; 
 
    transform: skew(18deg, 0deg); 
 
    padding: 15px 45px; 
 
} 
 

 
.carousel-caption h3 { 
 
    font-size: 35px; 
 
    font-family: "MyriadPro-Regular"; 
 
    margin-top: 10%; 
 
    color: #fff; 
 
    text-align: left; 
 
} 
 

 
.carousel-caption h3 .line { 
 
    transform: skew(-18deg, 0deg); 
 
    display:block; 
 
}

<div class="carousel-caption"> 
 
    <h3> 
 
    <span class="line">Hey guys</span> 
 
    <span class="line">please help me,</span> 
 
    <span class="line">with this output</span> 
 
    </h3> 
 

 
</div>