div內的旋轉文字

Question

所以我會盡力解釋這裏的情況。 我想旋轉div中的某些文本，而不讓其邊緣在div外顯示。我想連接的圖像中是這樣的：

什麼我目前得到的是這樣的：

<aside> 
    <h2>Greeting<p>s</p></h2> 
    <div class="text"> 
     <p> 
     text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
     </p> 
    </div> 
    </aside> 

aside{ 
    width: 20%; 
    display: inline-block; 
    vertical-align: top; 
    background-color: rgba(151, 0, 0, 0.76); 
    height: 71.3em; 
    float: left; 
    text-align: center; 

    h2{ 
    color: black; 
    font-family: 'Kaushan Script', cursive; 
    position: relative; 
    top: 1em; 
    font-size: 2em; 
    display: inline-block; 
    transform: rotate(15deg); 
    &:first-letter{ 
     font-size: 3em; 
    } 
    p{ 
     display: inline; 
     font-size: 2em; 
    } 
    } 

    .text{ 
    position:relative; 
    top: 3em; 

    p{ 
     font-size: 2em; 
     color: black; 
     font-family: 'Kaushan Script', cursive; 
     transform: rotate(15deg); 
    } 
    } 
} 

Answer 1

也許你可以使用傾斜，而不是： （對於90度旋轉，有writing-mode爲爲此，unfornately，就不會在這裏做）

aside { 
 
    width: 20%; 
 
    min-width:20em; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    background-color: rgba(151, 0, 0, 0.76); 
 
    height: 71.3em; 
 
    float: left; 
 
    text-align: center; 
 
} 
 
aside h2 { 
 
    color: black; 
 
    font-family: 'Kaushan Script', cursive; 
 
    position: relative; 
 
    top: 1em; 
 
    font-size: 2em; 
 
    display: inline-block; 
 
    transform: skew(0, 15deg); 
 
} 
 
aside h2:first-letter { 
 
    font-size: 3em; 
 
} 
 
aside h2 p { 
 
    display: inline; 
 
    font-size: 2em; 
 
} 
 
aside .text { 
 
    position: relative; 
 
    top: 3em; 
 
} 
 
aside .text p { 
 
    font-size: 2em; 
 
    color: black; 
 
    font-family: 'Kaushan Script', cursive; 
 
    transform: skew(0, 15deg); 
 
}

<aside> 
 
    <h2>Greeting<p>s</p></h2> 
 
    <div class="text"> 
 
     <p> 
 
     text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text 
 
     </p> 
 
    </div> 
 
    </aside>

http://codepen.io/anon/pen/GqBymr