ZenKurd ZenKurd - 4 months ago 9
Sass (Sass) Question

Rotated text inside div overlaps

So I will try my best to explain the situation here.
I want to rotate some text inside a div without letting its edges to show outside the div. I want something like in the attached image: result image

What I am currently getting is something like this: current

<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

Maybe you could use skew instead : (for a 90degrees rotation, there is writing-mode for that purpose, unfornately, it won't do here)

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

Comments