How to get text normally into a distorted shape(parallelogramm)?

Question

I am a bit confused: I want to create some parallelograms and put text into it. But as i put text into it, the text aligns to the shape of the parallelogram. Here is what ive tried

.parallelogram {
  width: 130px;
  height: 75px;
  background: blue;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}

<div class="parallelogram">
  <div>
    <p>Projects</p>
  </div>
</div>

So as you can see, i created a Div within a class, that creates the parallelogram. Now if i try to put another p tag as child into the div tag that contains the shape, my text looks not normally. Is there any way to remove the inerhit of the child? So my text would look normaly or is there even a better way? Thanks

Duplicate of https://stackoverflow.com/questions/17947565/how-to-skew-element-but-keep-text-normal-unskewed — koolkat, Sep 14 '17 at 19:01

score 0 · Answer 1 · answered Sep 14 '17 at 18:56

.parallelogram {
  width: 130px;
  height: 75px;
  background: blue;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  transform: skew(20deg);
}
.parallelogram p{
  transform: skew(-20deg);
}

<div class="parallelogram">
  <div>
    <p>Projects</p>
  </div>
</div>

.parallelogram p{
  transform: skew(-20deg);
}

score 0 · Answer 2 · answered Sep 14 '17 at 18:59

I think you trying something like this :

.parallelogram {
 width: 300px;
 height: 100px;
 background-color: green;
 transform: skewX(30deg);
 transform-origin: top;
 margin: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
}

.parallelogram > span {
 transform: skewX(-30deg);
}

<div class="parallelogram">
    <span>Projects</span>
</div>

How to get text normally into a distorted shape(parallelogramm)?

2 Answers2