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