Creating Rhombus makes text italic

Question

I wanted to create a Rhombus shape around text in CSS. I've got the shape working however, the text in the shape is now always italic.

I've tried to set font-weight: normal but it isn't changing anything.

My current code is:

<span id="shape_background">
    Test text
</span>

#shape_background { 
    display: block;
    position: relative; 
    background-color: red; 
    -webkit-transform: skew(-20deg); 
    transform: skew(-20deg); 
}

make the text a
or element, and rotate that element back 20deg. — Persijn, Aug 24 '15 at 10:01

score 5 · Accepted Answer · answered Aug 24 '15 at 10:02

In order to prevent the text getting the skew effect:

Wrap the text inside an element.
Apply inverse skew to the child element i.e. skew(20deg), +ve value of 20deg to negate the effect of -20deg

#shape_background {
  display: block;
  position: relative;
  background-color: red;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
}
#shape_background .text {
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  padding-left: 5px;
}

<span id="shape_background">
  <p class="text">Test text</p>
</span>

score 3 · Answer 2 · answered Aug 24 '15 at 10:06

#shape_background {
  display: block;
  //position: relative;
  background-color: red;
  -webkit-transform: skew(-20deg);
  transform: skew(-20deg);
}
#shape_background span {
  display: inline-block;
  -webkit-transform: skew(20deg);
  transform: skew(20deg);
  color: white;
}

<span id="shape_background">
    <span>Test text</span>
</span>

Creating Rhombus makes text italic

2 Answers2