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